I Tailwind CSS, ' utrymme mellan ” verktyg används för att kontrollera utrymmet mellan underordnade element i flex- eller rutnätsbehållare. Den erbjuder olika klasser, såsom 'mellanslag-x-
Denna guide kommer att exemplifiera metoden att använda ett negativt mellanrumsvärde i Tailwind.
Hur man använder ett negativt utrymmesvärde i medvind?
För att använda ett negativt mellanslagsvärde i Tailwind, gör först en HTML-struktur. Använd sedan bindestrecket ' – ” med önskat ”mellanslag mellan” verktygsklasser för att konvertera det till ett negativt värde. den ' -mellanslag-x-
Låt oss gå igenom exemplen nedan för att förstå det bättre.
Exempel 1: Tillämpa ett negativt horisontellt avstånd mellan elementen
I det här exemplet har vi en flexbehållare med några underordnade element i rad. Vi kommer att använda ' -mellanslag-x-8 ” klass för att tillämpa det negativa horisontella avståndet mellan flexelement:
< kropp >< div klass = 'flex -space-x-8 m-10 h-20 w-max' >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
kropp >
Här, i elementet föräldrar
-
- ' böja ” klass skapar en flexibel layout.
- ' -mellanslag-x-8 ” klass lägger till 8 enheter negativt horisontellt avstånd mellan flexelement i en container.
- ' m-10 ” klass lägger till en marginal på 10 enheter på alla sidor av behållaren.
- ' h-20 ” klass anger höjden på containern till 20 enheter.
- ' w-max ”-klassen ställer in behållarens bredd till dess maximala innehållsbredd.
I de underordnade
-
- ' bg-teal-500 ” klass ställer in bakgrunden för flexelement till teal.
- ' w-20 ” klass anger bredden på varje flexartikel till 20 enheter.
- ' p-5 ”-klassen lägger till 5 enheter stoppning på alla sidor av varje flexföremål.
- ' gräns-2 ” klass anger gränsbredden på behållaren till 2 enheter.
- ' border-teal-800 ” klass tillämpar krickfärgad färg på kanten.
Produktion
Ovanstående utdata visar att flexelementen överlappar varandra. Detta indikerar att det negativa horisontella mellanslagsvärdet har tillämpats framgångsrikt.
Exempel 2: Tillämpa ett negativt vertikalt avstånd mellan elementen
I det här exemplet har vi en flexbehållare med några underordnade element i en kolumn. Vi kommer att använda ' -mellanslag-y-7 ” klass för att tillämpa det negativa vertikala avståndet mellan flexelement:
< kropp >< div klass = 'flex flex-col -space-y-7 m-10 text-center' >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
kropp >
Här:
-
- ' böja ” klass skapar en flexibel layout.
- ' flex-col ” klass justerar flexobjekten i vertikal riktning.
- ' -mellanslag-y-5 ” klass lägger till 7 enheter negativt vertikalt avstånd mellan flexelement i en container.
- ' m-10 ” klass lägger till en marginal på 10 enheter på alla sidor av behållaren.
- ' text-center ” klass justerar texten i behållaren till mitten.
Produktion
Det kan ses att flexelementen överlappar varandra. Detta indikerar att det negativa vertikala mellanslagsvärdet har tillämpats framgångsrikt.
Slutsats
För att använda ett negativt mellanslagsvärde i Tailwind, använd ' -mellanslag-x-