A Tailwind CSS, el ' espai entre Les utilitats s'utilitzen per controlar l'espai entre els elements fills dels contenidors flexibles o de quadrícula. Ofereix diverses classes, com ara 'espai-x-
Aquesta guia exemplificarà el mètode d'utilitzar un valor d'espai negatiu a Tailwind.
Com utilitzar un valor d'espai negatiu a Tailwind?
Per utilitzar un valor d'espai negatiu a Tailwind, primer, feu una estructura HTML. A continuació, utilitzeu el guió ' – ' amb l''espai entre' classes d'utilitat desitjat per convertir-lo en un valor negatiu. El ' -espai-x-
Repassem els exemples següents per entendre-ho millor.
Exemple 1: apliqueu un espai horitzontal negatiu entre elements
En aquest exemple, tenim un contenidor flexible amb alguns elements secundaris seguits. Farem servir el ' -espai-x-8 ” classe per aplicar l'espaiat horitzontal negatiu entre els elements flexibles:
< cos >< div classe = 'flex -space-x-8 m-10 h-20 w-max' >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
cos >
Aquí, a l'element pares
-
- “ flexionar ”La classe crea un disseny flexible.
- “ -espai-x-8 La classe afegeix 8 unitats d'espaiat horitzontal negatiu entre elements flexibles dins d'un contenidor.
- “ m-10 ”La classe afegeix un marge de 10 unitats a tots els costats del contenidor.
- “ h-20 La classe estableix l'alçada del contenidor a 20 unitats.
- “ w-màx La classe estableix l'amplada del contenidor a la seva amplada màxima de contingut.
En els elements
-
- “ bg-teal-500 ”La classe estableix el fons dels elements flexibles en verd verd.
- “ w-20 La classe estableix l'amplada de cada element flexible en 20 unitats.
- “ pàg-5 La classe afegeix 5 unitats de farciment a tots els costats de cada element flexible.
- “ frontera-2 La classe estableix l'amplada de la vora del contenidor en 2 unitats.
- “ border-teal-800 ”La classe aplica color verd verd a la vora.
Sortida
La sortida anterior mostra que els elements flexibles es superposen. Això indica que el valor d'espai horitzontal negatiu s'ha aplicat correctament.
Exemple 2: apliqueu un espai vertical negatiu entre elements
En aquest exemple, tenim un contenidor flexible amb alguns elements secundaris en una columna. Farem servir el ' -espai-y-7 ” classe per aplicar l'espaiat vertical negatiu entre els elements flexibles:
< cos >< div classe = 'flex flex-col -space-y-7 m-10 text-center' >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
cos >
Aquí:
-
- “ flexionar ”La classe crea un disseny flexible.
- “ flex-col La classe alinea els elements flexibles en una direcció vertical.
- “ -espai-y-5 La classe afegeix 7 unitats d'espaiat vertical negatiu entre elements flexibles dins d'un contenidor.
- “ m-10 ”La classe afegeix un marge de 10 unitats a tots els costats del contenidor.
- “ centre de text ” La classe alinea el text del contenidor al centre.
Sortida
Es pot veure que els elements flexibles es superposen. Això indica que el valor d'espai vertical negatiu s'ha aplicat correctament.
Conclusió
Per utilitzar un valor d'espai negatiu a Tailwind, utilitzeu el ' -espai-x-