Den här bloggen kommer att ge en idé om att tilldela lika utrymme mellan flera element i Tailwind.
Hur tilldelar man lika utrymme mellan flera element i medvind?
Användare kan tilldela lika mellanrum mellan element genom att använda ' space-{x/y}-{size} ” bruksklass. Användare kan lägga till utrymme på x- eller y-axeln genom att ange ett heltalsvärde. Avståndsverktyget är nödvändigt eftersom det gör webbsidan attraktiv. Om en webbsida inte har rätt avstånd mellan elementen kommer den inte att locka användare.
Låt oss ta ett kodexempel för att tilldela lika utrymme mellan rutnätselement.
Metod 1: Tilldela utrymme på X-axeln.
Lika mellanrum tilldelat på x-axeln gör lika avstånd till höger och vänster om elementet. Använd följande syntax för att tilldela utrymmet på x-axeln:
Plats - x - { storlek }
Storleken kan vara vilket heltalsvärde som helst.
Överväg koden nedan för att tilldela lika utrymme på x-axeln:
< kropp >< div klass = 'mx-4 grid grid-cols-4 space-x-4' >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 1 div >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 2 div >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 3 div >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 4 div >
div >
kropp >
I denna kod:
- ' mx-4 ” lägger till en marginal på 4 px på x-axeln (höger och vänster).
- den ' rutnät ” klass skapar ett rutnät.
- den ' rutnät-cols-4 ” gör 4 kolumner i rutnätet.
- den ' space-x-4 ” lägger till ett 4px mellanrum mellan elementen i rutnätet.
- ' bg-grön-400 ” ställer in bakgrundsfärgen till grön.
- ' h-16 ” ställer in höjden till 16px.
- den ' rundad-lg ” gör hörnet runt och kantradien är stor.
- den ' gräns-2 ” gör en 2px kant runt elementet.
- ' gräns-grön-800 ” gör bården mörkgrön.
Produktion
Förhandsgranska utdata som skapats av koden ovan:
Det kan ses att ett avstånd på 4px tilldelas mellan elementen.
Metod 2: Tilldela utrymme på y-axeln.
Avståndet kan tilldelas på y-axeln liknande metoden ovan, genom små ändringar i ovanstående kod. Den tilldelar utrymmen längs y-axeln (topp och botten). Syntaxen för det är:
Nedanstående kod kan implementeras för att lägga till mellanslag längs y-axeln:
< kropp >< div klass = 'mx-4 my-4 space-y-4' >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 1 div >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 2 div >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 3 div >
< div klass = 'bg-grön-400 h-16 rundad-lg kant-2 kant-grön-800' > 4 div >
div >
kropp >
I denna kod:
- ' mx-4 ” lägger till en 4px marginal till vänster och höger om element för att göra utdata mer optimerad.
- ' min-4 ” lägger till en 4px marginal på y-axeln (överst och neder).
- ' mellanslag-y-4 ” lägger till ett utrymme på 4px på y-axeln (överst och neder).
Produktion
Spara ovanstående kod och förhandsgranska webbsidan som skapats av den för att se avståndet som:
Det handlar om att tilldela lika utrymme mellan elementen.
Slutsats
För att tilldela lika utrymme mellan flera element i Tailwind kan användare använda ' space-{x/y}-{size} ” nyttoklass och ange ett heltalsvärde som storlek enligt kravet. Lika avstånd mellan elementen gör resultatet mer skalbart och tittarna förblir engagerade i webbsidan. Det här inlägget har tillhandahållit metoden att tilldela lika utrymme mellan flera element i Tailwind.