Tailwind CSS gir ' margin ” verktøyklasser som gjør det mulig for brukere å kontrollere avstanden rundt elementer. De horisontal marg legger til plass til venstre og høyre side av et element, mens en vertikal margin legger til plass til toppen og bunnen av et element. Tailwind tilbyr ulike verktøyklasser for å legge til horisontale eller vertikale marginer til de ønskede elementene.
Denne artikkelen vil eksemplifisere:
Hvordan legge til en horisontal margin i medvind?
For å legge til en horisontal marg til et element i Tailwind, ' mx-
Syntaks
< element klasse = 'mx-
Her representerer 'mx' 'x-aksen' eller 'horisontal margin'. Sørg for å erstatte '
Eksempel: Bruk av en horisontal marg på et HTML-element
I dette eksemplet vil vi bruke ' mx-10 ' bruksklasse med ' For å legge til en vertikal marg til et element i Tailwind, bruk ' min- Syntaks Eksempel: Bruk av en vertikal marg på et HTML-element I dette eksemplet vil vi bruke ' min-10 ' bruksklasse med ' For å legge til den horisontale og vertikale margen i Tailwind, ' mx-
< kropp >
< div klasse = 'h-skjerm mx-10 bg-lilla-500' >
< s klasse = 'tekst-5xl tekstsenter' > Margin i Medvind CSS s >
div >
kropp >
Produksjon
Utgangen ovenfor viser margen til venstre og høyre side av beholderen. Dette indikerer at den horisontale margen har blitt brukt på beholderelementet. Hvordan legge til en vertikal margin i medvind?
Her representerer 'min' 'y-aksen' eller 'vertikal margin'. Sørg for å erstatte '
< div klasse = 'h-96 my-10 bg-lilla-500' >
< s klasse = 'tekst-5xl tekstsenter' > Margin i Medvind CSS s >
div >
kropp >
Produksjon
Utgangen ovenfor viser margen til topp- og bunnsiden av beholderen. Dette indikerer at den vertikale marginen er effektivt påført beholderelementet. Konklusjon