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-
Syntaks
< element klasse = 'mx-
Her repræsenterer 'mx' 'x-aksen' eller 'vandret margin'. Sørg for at erstatte '
Eksempel: Anvendelse af en vandret margen på et HTML-element
I dette eksempel vil vi bruge ' mx-10 ' brugsklasse med ' For at tilføje en lodret margen til et element i Tailwind, brug ' min- Syntaks Eksempel: Anvendelse af en lodret margen på et HTML-element I dette eksempel vil vi bruge ' min-10 ' brugsklasse med ' For at tilføje den vandrette og lodrette margen i Tailwind, ' mx-
< 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?
Her repræsenterer 'min' 'y-aksen' eller 'lodret margin'. Sørg for at erstatte '
< 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