Com afegir un marge horitzontal i vertical a Tailwind?

Com Afegir Un Marge Horitzontal I Vertical A Tailwind



Tailwind CSS proporciona ' marge ” classes d'utilitat que permeten als usuaris controlar l'espaiat al voltant dels elements. El marge horitzontal afegeix espai als costats esquerre i dret d'un element, mentre que a marge vertical afegeix espai a la part superior i inferior d'un element. Tailwind ofereix diverses classes d'utilitat per afegir marges horitzontals o verticals als elements desitjats.

Aquest article exemplificarà:







Com afegir un marge horitzontal a Tailwind?

Per afegir un marge horitzontal a un element a Tailwind, el ' mx- ” s'utilitza amb l'element desitjat al programa HTML. Els usuaris poden especificar diferents valors per a la mida del marge. Aquesta classe afegeix un marge al llarg de l'eix X (costs dret i esquerre).



Sintaxi



< element classe = 'mx-...' > ... element >


Aquí, 'mx' representa l''eix x' o 'marge horitzontal'. Assegureu-vos de substituir '' per qualsevol valor vàlid, com ara '5', '14', etc.





Exemple: aplicació d'un marge horitzontal a un element HTML

En aquest exemple, utilitzarem el ' mx-10 ' classe d'utilitat amb el '

” element per afegir-hi un marge horitzontal:



< cos >

< div classe = 'h-screen mx-10 bg-purple-500' >

< pàg classe = 'text-5xl text-center' > Marge en CSS de vent de cua pàg >

div >

cos >


Sortida


La sortida anterior mostra el marge als costats esquerre i dret del contenidor. Això indica que el marge horitzontal s'ha aplicat correctament a l'element contenidor.

Com afegir un marge vertical a Tailwind?

Per afegir un marge vertical a un element a Tailwind, utilitzeu ' el meu- ” classe d'utilitat amb l'element específic del programa HTML. Aquesta classe afegeix un marge al llarg de l'eix y (costats superior i inferior).

Sintaxi

< element classe = 'el meu-...' > ... element >


Aquí, 'el meu' representa l''eix Y' o 'marge vertical'. Assegureu-vos de substituir '' per qualsevol valor vàlid, com ara '6', '12', etc.

Exemple: aplicació d'un marge vertical a un element HTML

En aquest exemple, utilitzarem el ' el meu-10 ' classe d'utilitat amb el '

” element per afegir-hi un marge vertical:

< cos >

< div classe = 'h-96 my-10 bg-morat-500' >

< pàg classe = 'text-5xl text-center' > Marge en CSS de vent de cua pàg >

div >

cos >


Sortida


La sortida anterior mostra el marge als costats superior i inferior del contenidor. Això indica que el marge vertical s'ha aplicat efectivament a l'element contenidor.

Conclusió

Per afegir el marge horitzontal i vertical a Tailwind, el ' mx- ' i ' el meu- ” Les classes d'utilitat s'utilitzen amb els elements desitjats al programa HTML respectivament. Els usuaris poden especificar diferents valors per aplicar un marge a l'esquerra i dreta o superior i inferior d'un element. Aquest escrit ha exemplificat el mètode d'aplicació de marges horitzontals i verticals a Tailwind.