Tailwind CSS biedt “ marge ” utility-klassen waarmee gebruikers de afstand rond elementen kunnen regelen. De horizontale marge voegt ruimte toe aan de linker- en rechterkant van een element, terwijl a verticale marge voegt ruimte toe aan de boven- en onderkant van een element. Tailwind biedt verschillende utiliteitsklassen om horizontale of verticale marges toe te voegen aan de gewenste elementen.
Dit artikel zal illustreren:
Hoe voeg ik een horizontale marge toe in Tailwind?
Om een horizontale marge toe te voegen aan een element in Tailwind, de ' mx-
Syntaxis
< element klas = 'mx-
Hier vertegenwoordigt 'mx' de 'x-as' of 'horizontale marge'. Zorg ervoor dat u '
Voorbeeld: een horizontale marge toepassen op een HTML-element
In dit voorbeeld gebruiken we de ' mx-10 ” hulpprogramma klasse met de “ Om een verticale marge toe te voegen aan een element in Tailwind, gebruikt u de ' mijn- Syntaxis Voorbeeld: een verticale marge toepassen op een HTML-element In dit voorbeeld gebruiken we de ' mijn-10 ” hulpprogramma klasse met de “ Om de horizontale en verticale marge in Tailwind toe te voegen, de ' mx-
< lichaam >
< div klas = 'h-screen mx-10 bg-paars-500' >
< P klas = 'tekst-5xl tekstcentrum' > Marge in Tailwind-CSS P >
div >
lichaam >
Uitgang 
De bovenstaande uitvoer toont de marge aan de linker- en rechterkant van de container. Dit geeft aan dat de horizontale marge met succes is toegepast op het containerelement. Hoe voeg ik een verticale marge toe in Tailwind?
Hier vertegenwoordigt 'mijn' de 'y-as' of 'verticale marge'. Zorg ervoor dat u '
< div klas = 'h-96 my-10 bg-paars-500' >
< P klas = 'tekst-5xl tekstcentrum' > Marge in Tailwind-CSS P >
div >
lichaam >
Uitgang 
De bovenstaande uitvoer toont de marge naar de boven- en onderkant van de container. Dit geeft aan dat de verticale marge effectief is toegepast op het containerelement. Conclusie