Hur lägger man till marginal på en sida i medvind?

Hur Lagger Man Till Marginal Pa En Sida I Medvind



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 '

”-element för att lägga till 14 enheter marginal överst:

< kropp >

< div klass = 'h-96 mt-14 bg-lila-500' >

< sid klass = 'text-5xl text-center' > Marginal i Medvind CSS sid >

div >

kropp >


Här:



    • ' h-96 ” klass anger höjden på
      -behållaren till 96 enheter.
    • ' mt-14 ” klass tillämpar 14 enheter marginal till toppen av behållaren.
    • ' bg-lila-500 ” klass ställer in den lila färgen till bakgrunden av behållaren.

Produktion


Ovanstående utdata visar att marginalen har lagts till på toppen av behållaren.

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 '

”-element för att lägga till 14 enheter marginal längst ner:

< kropp >

< 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.

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 '

”-element för att lägga till 14 enheter marginal till vänster:

< kropp >

< 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.

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 '

” element för att lägga till 14 enheter marginal till höger:

< kropp >

< 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

För att lägga till marginal på en enskild sida av ett element i Tailwind kan olika verktygsklasser användas, som ' ml- ”, “ mr- ”, “ mt- ', och ' mb- ”. Dessa klasser lägger till marginal till det specifika elementets vänstra, högra, övre respektive nedre sida. Användare kan ange olika värden för storleken på marginalen. Den här bloggen har visat exempel för att lägga till marginal till en enskild sida av ett element i Tailwind CSS.