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-
Sintaxi
< element classe = 'mx-
Aquí, 'mx' representa l''eix x' o 'marge horitzontal'. Assegureu-vos de substituir '
Exemple: aplicació d'un marge horitzontal a un element HTML
En aquest exemple, utilitzarem el ' mx-10 ' classe d'utilitat amb el ' Per afegir un marge vertical a un element a Tailwind, utilitzeu ' el meu- Sintaxi Exemple: aplicació d'un marge vertical a un element HTML En aquest exemple, utilitzarem el ' el meu-10 ' classe d'utilitat amb el ' Per afegir el marge horitzontal i vertical a Tailwind, el ' mx-
< 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?
Aquí, 'el meu' representa l''eix Y' o 'marge vertical'. Assegureu-vos de substituir '
< 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ó