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-
Syntax
< element klass = 'mx-
Här representerar 'mx' 'x-axeln' eller 'horisontell marginal'. Se till att ersätta '
Exempel: Tillämpa en horisontell marginal på ett HTML-element
I det här exemplet kommer vi att använda ' mx-10 ' nyttoklass med ' För att lägga till en vertikal marginal till ett element i Tailwind, använd ' mitt- Syntax Exempel: Tillämpa en vertikal marginal på ett HTML-element I det här exemplet kommer vi att använda ' min-10 ' nyttoklass med ' För att lägga till den horisontella och vertikala marginalen i Tailwind, ' mx-
< 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?
Här representerar 'min' 'y-axeln' eller 'vertikal marginal'. Se till att ersätta '
< 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