I Tailwind CSS, en marginal används för att styra avståndet runt det specifika elementet. Det lägger till utrymme mellan det applicerade elementet och dess omgivande element. Tailwind CSS tillhandahåller en uppsättning marginalverktyg och marginalvärden som tillåter användare att anpassa avståndet runt önskade element. Dessutom kan användare lägga till en marginal på en enda sida, till exempel toppen, botten, vänster eller höger på ett visst element.
Den här bloggen kommer att visa exempel för att lägga till marginal till en enskild sida av ett element i Tailwind CSS.
Hur lägger man till marginal på en sida i medvind?
För att lägga till marginal till en enskild sida av ett element i Tailwind kan följande verktygsklasser användas:
För att förstå det bättre, gå igenom nedanstående exempel.
Exempel 1: Lägg till marginal till toppen av ett element
I det här exemplet kommer vi att använda ' mt-14 ' nyttoklass i ' Produktion Exempel 2: Lägg till marginal till botten av ett element I det här exemplet kommer vi att använda ' mb-14 ' klass i ' Exempel 3: Lägg till marginal till vänster om ett element I det här exemplet kommer vi att använda ' ml-14 ' klass i ' Exempel 4: Lägg till marginal till höger om ett element I det här exemplet kommer vi att använda ' mr-14 ' klass i ' För att lägga till marginal på en enskild sida av ett element i Tailwind kan olika verktygsklasser användas, som ' ml-
< div klass = 'h-96 mt-14 bg-lila-500' >
< sid klass = 'text-5xl text-center' > Marginal i Medvind CSS sid >
div >
kropp >
Här:
Ovanstående utdata visar att marginalen har lagts till på toppen av behållaren.
< div klass = 'h-96 mb-14 bg-lila-500' >
< sid klass = 'text-5xl text-center' > Marginal i Medvind CSS sid >
div >
kropp >
Produktion
Det kan ses att marginalen har lagts till behållarens botten.
< div klass = 'h-96 ml-14 bg-lila-500' >
< sid klass = 'text-5xl text-center' > Marginal i Medvind CSS sid >
div >
kropp >
Produktion
Ovanstående utdata visar att marginalen har lagts till till vänster om behållarelementet.
< div klass = 'h-96 mr-14 bg-lila-500' >
< sid klass = 'text-5xl text-center' > Marginal i Medvind CSS sid >
div >
kropp >
Produktion
Som du kan se har marginalen effektivt lagts till till höger om behållaren. Slutsats