¿Cómo agregar relleno horizontal y vertical en Tailwind?

Como Agregar Relleno Horizontal Y Vertical En Tailwind



En Tailwind CSS, relleno es el espacio entre el contenido del elemento específico y su borde. acolchado horizontal es el espacio en el lado izquierdo y derecho del elemento, mientras que acolchado vertical es el espacio en la parte superior e inferior de un elemento. Tailwind ofrece varias clases de utilidad para agregar relleno horizontal o vertical a los elementos deseados.

Este artículo ilustrará:







¿Cómo agregar relleno horizontal en Tailwind?

Para agregar relleno horizontal a un elemento en Tailwind, la clase 'px-' se usa con el elemento deseado en el programa HTML. Los usuarios pueden especificar diferentes valores para el tamaño del relleno. Esta clase agrega relleno a lo largo del eje x, es decir, a los lados izquierdo y derecho del elemento.



Sintaxis



< elemento clase = 'px-0...' > ... elemento >

 
Aquí 'px' representa el 'eje x' o 'relleno horizontal'.





Ejemplo: aplicar relleno horizontal a un elemento HTML

En este ejemplo, usaremos el ' px-20 ” clase de utilidad con el “

” elemento para agregarle relleno horizontal:



< cuerpo >

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

cuerpo >

 
Producción


El resultado anterior muestra el relleno a los lados izquierdo y derecho del contenedor. Esto indica que el relleno horizontal se ha aplicado correctamente al elemento contenedor.

¿Cómo agregar relleno vertical en Tailwind?

Para agregar relleno vertical a un elemento en Tailwind, use el ' py- ” clase de utilidad con el elemento específico en el programa HTML. Esta clase agrega relleno a lo largo del eje y, es decir, a los lados superior e inferior del elemento.

Sintaxis

< elemento clase = 'py-0...' > ... elemento >

 
Aquí 'py' representa el 'eje y' o 'relleno vertical'.

Ejemplo: aplicar relleno vertical a un elemento HTML

En este ejemplo, usaremos el ' py-20 ” clase de utilidad con el “

” elemento para agregarle relleno vertical:

< cuerpo >

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

cuerpo >

 
Producción


El resultado anterior muestra el relleno en los lados superior e inferior del contenedor. Esto indica que el relleno vertical se ha aplicado efectivamente al elemento contenedor.

Conclusión

Para agregar el relleno horizontal y vertical en Tailwind, el ' px- ' y ' py- Las clases de utilidad se utilizan con los elementos deseados en el programa HTML respectivamente. Los usuarios pueden especificar diferentes valores para aplicar relleno a la izquierda y derecha o arriba y abajo de un elemento. Este artículo ha ilustrado el método completo para aplicar relleno horizontal y vertical en Tailwind.