Aquest bloc proporcionarà una idea d'assignar un espai igual entre diversos elements a Tailwind.
Com assignar un espai igual entre diversos elements a Tailwind?
Els usuaris poden assignar espais iguals entre elements utilitzant el ' espai-{x/y}-{mida} ” classe d'utilitat. Els usuaris poden afegir espai a l'eix x o y especificant un valor enter. La utilitat d'espaiat és necessària perquè fa que la pàgina web sigui atractiva. Si una pàgina web no té un espai adequat entre els elements, no atraurà els usuaris.
Prenem un exemple de codi per assignar un espai igual entre els elements de la quadrícula.
Mètode 1: Assignació d'espai a l'eix X.
L'espai igual assignat a l'eix x fa igual espai a la dreta i a l'esquerra de l'element. Per assignar l'espai a l'eix x, utilitzeu la sintaxi següent:
espai - x - { mida }
La mida pot ser qualsevol valor enter.
Considereu el codi següent per assignar un espai igual a l'eix x:
< cos >< div classe = 'mx-4 grid grid-cols-4 space-x-4' >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 1 div >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 2 div >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 3 div >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 4 div >
div >
cos >
En aquest codi:
- “ mx-4 ” afegeix un marge de 4 px a l'eix x (dreta i esquerra).
- El ' graella ”La classe crea una graella.
- El ' graella-cols-4 ” feu 4 columnes a la graella.
- El ' espai-x-4 ” afegeix un espai de 4 píxels entre els elements de la quadrícula.
- “ bg-verd-400 ” estableix el color de fons en verd.
- “ h-16 ” estableix l'alçada a 16 px.
- El ' arrodonit-lg ” fa que la cantonada sigui rodona i el radi de la vora és gran.
- El ' frontera-2 ” fa una vora de 2 píxels al voltant de l'element.
- “ vorera-verd-800 ” fa que la vora sigui verd fosc.
Sortida
Previsualitza la sortida creada pel codi anterior:
Es pot veure que s'assigna un espai de 4px entre els elements.
Mètode 2: Assignació d'espai a l'eix Y.
L'espaiat es pot assignar a l'eix y de manera similar al mètode anterior, mitjançant petits canvis en el codi anterior. Assigna espais al llarg de l'eix y (superior i inferior). La sintaxi per això és:
El codi següent es pot implementar per afegir espais al llarg de l'eix y:
< cos >< div classe = 'mx-4 my-4 space-y-4' >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 1 div >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 2 div >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 3 div >
< div classe = 'bg-green-400 h-16 arrodonit-lg vora-2 vora-verd-800' > 4 div >
div >
cos >
En aquest codi:
- “ mx-4 ” afegeix un marge de 4 píxels a l'esquerra i a la dreta dels elements per optimitzar la sortida.
- “ el meu-4 ” afegeix un marge de 4 píxels a l'eix y (superior i inferior).
- “ espai-y-4 ” afegeix un espai de 4 px a l'eix y (superior i inferior).
Sortida
Deseu el codi anterior i previsualitzeu la pàgina web creada per aquest per veure l'espaiat com:
Es tracta d'assignar un espai igual entre els elements.
Conclusió
Per assignar un espai igual entre diversos elements a Tailwind, els usuaris poden utilitzar el ' espai-{x/y}-{mida} ” classe d'utilitat i especifiqueu un valor enter com a mida segons el requisit. L'espaiat igual entre els elements fa que la sortida sigui més escalable i els espectadors es mantinguin compromesos amb la pàgina web. Aquesta publicació ha proporcionat el mètode per assignar un espai igual entre diversos elements a Tailwind.