Hur lägger man till horisontell och vertikal marginal i medvind?

Hur Lagger Man Till Horisontell Och Vertikal Marginal I Medvind



Tailwind CSS ger ' marginal ” verktygsklasser som gör det möjligt för användare att kontrollera avståndet runt element. De horisontell marginal lägger till utrymme till vänster och höger sida av ett element, medan en vertikal marginal lägger till utrymme till toppen och botten av ett element. Tailwind erbjuder olika verktygsklasser för att lägga till horisontella eller vertikala marginaler till de önskade elementen.

Denna artikel kommer att exemplifiera:







Hur lägger man till en horisontell marginal i medvind?

För att lägga till en horisontell marginal till ett element i Tailwind, ' mx- ” klass används med önskat element i HTML-programmet. Användare kan ange olika värden för storleken på marginalen. Denna klass lägger till en marginal längs x-axeln (höger och vänster sida).



Syntax



< element klass = 'mx- ...' > ... element >


Här representerar 'mx' 'x-axeln' eller 'horisontell marginal'. Se till att ersätta '' med valfritt giltigt värde, till exempel '5', '14' osv.





Exempel: Tillämpa en horisontell marginal på ett HTML-element

I det här exemplet kommer vi att använda ' mx-10 ' nyttoklass med '

'-element för att lägga till en horisontell marginal till det:



< kropp >

< div klass = 'h-skärm mx-10 bg-lila-500' >

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

div >

kropp >


Produktion


Ovanstående utdata visar marginalen till vänster och höger sida av behållaren. Detta indikerar att den horisontella marginalen har applicerats på behållarelementet framgångsrikt.

Hur lägger man till en vertikal marginal i medvind?

För att lägga till en vertikal marginal till ett element i Tailwind, använd ' mitt- ” verktygsklass med det specifika elementet i HTML-programmet. Denna klass lägger till en marginal längs y-axeln (över- och undersidan).

Syntax

< element klass = 'mitt- ...' > ... element >


Här representerar 'min' 'y-axeln' eller 'vertikal marginal'. Se till att ersätta '' med valfritt giltigt värde, till exempel '6', '12' osv.

Exempel: Tillämpa en vertikal marginal på ett HTML-element

I det här exemplet kommer vi att använda ' min-10 ' nyttoklass med '

'-element för att lägga till en vertikal marginal till det:

< kropp >

< div klass = 'h-96 my-10 bg-lila-500' >

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

div >

kropp >


Produktion


Ovanstående utdata visar marginalen till behållarens över- och undersida. Detta indikerar att den vertikala marginalen effektivt har applicerats på behållarelementet.

Slutsats

För att lägga till den horisontella och vertikala marginalen i Tailwind, ' mx- ' och ' mitt- ” verktygsklasser används med önskade element i respektive HTML-program. Användare kan ange olika värden för att tillämpa marginal till vänster och höger eller toppen och botten av ett element. Denna uppskrivning har exemplifierat metoden att tillämpa horisontella och vertikala marginaler i Tailwind.