Com afegir encoixinat horitzontal i vertical a Tailwind?

Com Afegir Encoixinat Horitzontal I Vertical A Tailwind



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-' amb l'element desitjat al programa HTML. Els usuaris poden especificar diferents valors per a la mida del farciment. Aquesta classe afegeix farciment al llarg de l'eix x, és a dir, als costats esquerre i dret de l'element.



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 '

” element per afegir-hi un farciment horitzontal:



< 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?

Per afegir un farciment vertical a un element a Tailwind, utilitzeu el botó “ py- ” classe d'utilitat amb l'element específic del programa HTML. Aquesta classe afegeix farciment al llarg de l'eix y, és a dir, tant a la part superior com a la part inferior de l'element.

Sintaxi

< element classe = 'py-0...' > ... element >


Aquí 'py' representa l''eix Y' o 'encoixinat vertical'.

Exemple: aplicació de farciment vertical a un element HTML

En aquest exemple, utilitzarem el ' py-20 ' classe d'utilitat amb el '

” element per afegir-hi farciment vertical:

< cos >

< 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ó

Per afegir el farciment horitzontal i vertical a Tailwind, el ' px- ' i ' py- ” Les classes d'utilitat s'utilitzen amb els elements desitjats al programa HTML respectivament. Els usuaris poden especificar diferents valors per aplicar el farciment a l'esquerra i dreta o superior i inferior d'un element. Aquest article ha il·lustrat el mètode complet per aplicar el farciment horitzontal i vertical a Tailwind.