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-
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 “ Para agregar relleno vertical a un elemento en Tailwind, use el ' py- Sintaxis Ejemplo: aplicar relleno vertical a un elemento HTML En este ejemplo, usaremos el ' py-20 ” clase de utilidad con el “ Para agregar el relleno horizontal y vertical en Tailwind, el ' px-
< 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?
Aquí 'py' representa el 'eje y' o 'relleno vertical'.
< 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