En Tailwind CSS, farciment és l'espai entre el contingut de l'element específic i la seva vora. Encoixinat horitzontal és l'espai al costat esquerre i dret de l'element, mentre que encoixinat vertical és l'espai a la part superior i inferior d'un element. Tailwind ofereix diverses classes d'utilitat per afegir farciment horitzontal o vertical als elements desitjats.
Aquest article il·lustrarà:
Com afegir encoixinat horitzontal a Tailwind?
Per afegir farciment horitzontal a un element a Tailwind, s'utilitza la classe 'px-
Sintaxi
< element classe = 'px-0...' > ... element >
Aquí 'px' representa l''eix x' o 'encoixinat horitzontal'.
Exemple: aplicació de farciment horitzontal a un element HTML
En aquest exemple, utilitzarem el ' px-20 ' classe d'utilitat amb el ' Per afegir un farciment vertical a un element a Tailwind, utilitzeu el botó “ py- Sintaxi Exemple: aplicació de farciment vertical a un element HTML En aquest exemple, utilitzarem el ' py-20 ' classe d'utilitat amb el ' Per afegir el farciment horitzontal i vertical a Tailwind, el ' px-
< cos >
< div classe = 'bg-pink-600 px-20 w-max' >
Encoixinat en CSS de vent de cua
div >
cos >
Sortida
La sortida anterior mostra el farciment als costats esquerre i dret del contenidor. Això indica que el farciment horitzontal s'ha aplicat correctament a l'element contenidor. Com afegir un farciment vertical a Tailwind?
Aquí 'py' representa l''eix Y' o 'encoixinat vertical'.
< div classe = 'bg-pink-600 py-20 w-max' >
Encoixinat en CSS de vent de cua
div >
cos >
Sortida
La sortida anterior mostra el farciment als costats superior i inferior del contenidor. Això indica que el farciment vertical s'ha aplicat eficaçment a l'element contenidor. Conclusió