Hvordan tilføjes vandret og lodret margin i medvind?

Hvordan Tilfojes Vandret Og Lodret Margin I Medvind



Tailwind CSS giver ' margen ” hjælpeklasser, der gør det muligt for brugere at kontrollere afstanden omkring elementer. Det vandret margin tilføjer plads til venstre og højre side af et element, hvorimod en lodret margin tilføjer plads til toppen og bunden af ​​et element. Tailwind tilbyder forskellige hjælpeklasser for at tilføje vandrette eller lodrette marginer til de ønskede elementer.

Denne artikel vil eksemplificere:







Hvordan tilføjer man en horisontal margin i medvind?

For at tilføje en vandret margen til et element i Tailwind, ' mx- ” klasse bruges med det ønskede element i HTML-programmet. Brugere kan angive forskellige værdier for størrelsen af ​​marginen. Denne klasse tilføjer en margen langs x-aksen (højre og venstre side).



Syntaks



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


Her repræsenterer 'mx' 'x-aksen' eller 'vandret margin'. Sørg for at erstatte '' med enhver gyldig værdi, såsom '5', '14' osv.





Eksempel: Anvendelse af en vandret margen på et HTML-element

I dette eksempel vil vi bruge ' mx-10 ' brugsklasse med '

' element for at tilføje en vandret margen til det:



< legeme >

< div klasse = 'h-skærm mx-10 bg-lilla-500' >

< s klasse = 'text-5xl tekstcenter' > Margin i Medvind CSS s >

div >

legeme >


Produktion


Ovenstående output viser margenen til venstre og højre side af beholderen. Dette indikerer, at den vandrette margen er blevet anvendt på beholderelementet med succes.

Sådan tilføjes en lodret margin i medvind?

For at tilføje en lodret margen til et element i Tailwind, brug ' min- ” hjælpeklasse med det specifikke element i HTML-programmet. Denne klasse tilføjer en margen langs y-aksen (øverste og nederste sider).

Syntaks

< element klasse = 'min- ...' > ... element >


Her repræsenterer 'min' 'y-aksen' eller 'lodret margin'. Sørg for at erstatte '' med enhver gyldig værdi, såsom '6', '12' osv.

Eksempel: Anvendelse af en lodret margen på et HTML-element

I dette eksempel vil vi bruge ' min-10 ' brugsklasse med '

' element for at tilføje en lodret margen til det:

< legeme >

< div klasse = 'h-96 my-10 bg-lilla-500' >

< s klasse = 'text-5xl tekstcenter' > Margin i Medvind CSS s >

div >

legeme >


Produktion


Ovenstående output viser margenen til toppen og bunden af ​​beholderen. Dette indikerer, at den lodrette margin er blevet effektivt påført beholderelementet.

Konklusion

For at tilføje den vandrette og lodrette margen i Tailwind, ' mx- ' og ' min- ” utility classes bruges med de ønskede elementer i HTML-programmet hhv. Brugere kan angive forskellige værdier for at anvende margen til venstre og højre eller toppen og bunden af ​​et element. Denne opskrivning har eksemplificeret metoden til at anvende vandrette og lodrette marginer i Tailwind.