Hvordan legge til horisontal og vertikal margin i medvind?

Hvordan Legge Til Horisontal Og Vertikal Margin I Medvind



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- ” klasse brukes med ønsket element i HTML-programmet. Brukere kan spesifisere forskjellige verdier for størrelsen på margen. Denne klassen legger til en margin langs x-aksen (høyre og venstre side).



Syntaks



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


Her representerer 'mx' 'x-aksen' eller 'horisontal margin'. Sørg for å erstatte '' med en hvilken som helst gyldig verdi, for eksempel '5', '14' osv.





Eksempel: Bruk av en horisontal marg på et HTML-element

I dette eksemplet vil vi bruke ' mx-10 ' bruksklasse med '

element for å legge til en horisontal marg til det:



< 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?

For å legge til en vertikal marg til et element i Tailwind, bruk ' min- ” verktøyklasse med det spesifikke elementet i HTML-programmet. Denne klassen legger til en margin langs y-aksen (øvre og nedre sider).

Syntaks

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


Her representerer 'min' 'y-aksen' eller 'vertikal margin'. Sørg for å erstatte '' med en hvilken som helst gyldig verdi, for eksempel '6', '12' osv.

Eksempel: Bruk av en vertikal marg på et HTML-element

I dette eksemplet vil vi bruke ' min-10 ' bruksklasse med '

element for å legge til en vertikal marg til det:

< kropp >

< 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

For å legge til den horisontale og vertikale margen i Tailwind, ' mx- ' og ' min- ” nytteklasser brukes med de ønskede elementene i HTML-programmet henholdsvis. Brukere kan angi forskjellige verdier for å bruke margen til venstre og høyre eller toppen og bunnen av et element. Denne oppskriften har eksemplifisert metoden for å bruke horisontale og vertikale marginer i Tailwind.