¿Cómo agregar relleno a todos los lados en Tailwind?

Como Agregar Relleno A Todos Los Lados En Tailwind



Tailwind CSS es un marco bien conocido que se utiliza para crear páginas web o diseños personalizables y receptivos. También permite a los usuarios controlar el diseño y el espaciado de los elementos sin escribir ningún CSS personalizado. El relleno es el espacio entre el contenido del elemento en particular y su borde. A veces, los usuarios quieren aplicar la misma cantidad de relleno a cada lado de un elemento. Tailwind proporciona clases de utilidad para aplicar relleno a todos los lados de un elemento, o a lados específicos, como superior, derecho, inferior o izquierdo.

Este artículo ejemplificará el método para agregar relleno a todos los lados de un elemento en Tailwind.







¿Cómo agregar relleno a todos los lados en Tailwind?

Para agregar relleno a todos los lados de un elemento en particular en Tailwind, cree una estructura HTML. Luego, use la clase de utilidad 'p-' con el elemento en particular. Es necesario especificar el valor deseado para aplicar relleno a un elemento. A continuación, consulte la página web HTML para asegurarse de que haya cambios.



Sintaxis



< elemento clase = 'p-' ... elemento >

 
Reemplace el “” con cualquier número deseado, como 2, 4, 12, 20, etc.





Ejemplo

En este ejemplo, tenemos dos “

' elementos y aplicaremos dos rellenos diferentes, es decir, ' p-8 ' y ' p-14 ' en ellos:



< cuerpo >

  < división clase = 'bg-rosa-600 p-8 w-máx' >
Relleno en CSS viento de cola
  división >  

  < hermano >

  < división clase = 'bg-teal-600 p-14 w-max' >
Relleno en CSS viento de cola
  división >  

cuerpo >

 
Aquí, en el primer

:

    • bg-rosa-600 La clase ” establece el color rosa en el fondo del elemento
      .
    • p-8 La clase ” agrega las 8 unidades de relleno a todos los lados del contenedor.
    • w-máx La clase ” establece el ancho del elemento
      en su ancho de contenido máximo.

En el segundo

:

    • bg-verde azulado-600 La clase ” establece el color verde azulado en el fondo del elemento
      .
    • p-14 La clase ” aplica 14 unidades de relleno en todos los lados del contenedor.
    • w-máx La clase ” establece el ancho del elemento
      en su ancho de contenido máximo.

Producción


De acuerdo con el resultado anterior, el relleno especificado se ha aplicado a todos los lados de ambos contenedores.

Conclusión

Para agregar relleno a todos los lados de un elemento en Tailwind, la clase de utilidad 'p-' se usa con el elemento deseado en el programa HTML. Los usuarios deben especificar el valor específico para aplicar relleno a un elemento. Para la verificación, consulte la página web HTML y asegúrese de que haya cambios. Este artículo ha ejemplificado el método para agregar relleno a todos los lados de un elemento en Tailwind.