Tailwind CSS bietet „ Marge „Dienstprogrammklassen, mit denen Benutzer den Abstand um Elemente steuern können. Der horizontaler Rand fügt der linken und rechten Seite eines Elements Platz hinzu, während a vertikaler Rand Fügt oben und unten an einem Element Platz hinzu. Tailwind bietet verschiedene Utility-Klassen, um den gewünschten Elementen horizontale oder vertikale Ränder hinzuzufügen.
Dieser Artikel veranschaulicht Folgendes:
Wie füge ich in Tailwind einen horizontalen Rand hinzu?
Um einem Element in Tailwind einen horizontalen Rand hinzuzufügen, muss „ mx-
Syntax
< Element Klasse = 'mx-
Hier steht „mx“ für die „x-Achse“ oder den „horizontalen Rand“. Stellen Sie sicher, dass Sie „
Beispiel: Anwenden eines horizontalen Randes auf ein HTML-Element
In diesem Beispiel verwenden wir das „ mx-10 ” Utility-Klasse mit dem „ Um einem Element in Tailwind einen vertikalen Rand hinzuzufügen, verwenden Sie die Option „ mein- Syntax Beispiel: Anwenden eines vertikalen Randes auf ein HTML-Element In diesem Beispiel verwenden wir das „ mein-10 ” Utility-Klasse mit dem „ Um den horizontalen und vertikalen Rand in Tailwind hinzuzufügen, muss „ mx-
< Körper >
< div Klasse = „h-screen mx-10 bg-purple-500“ >
< P Klasse = „text-5xl text-center“ > Marge In Rückenwind-CSS P >
div >
Körper >
Ausgabe 
Die obige Ausgabe zeigt den Rand auf der linken und rechten Seite des Containers. Dies zeigt an, dass der horizontale Rand erfolgreich auf das Containerelement angewendet wurde. Wie füge ich in Tailwind einen vertikalen Rand hinzu?
Hier steht „my“ für die „y-Achse“ oder den „vertikalen Rand“. Stellen Sie sicher, dass Sie „
< div Klasse = „h-96 my-10 bg-purple-500“ >
< P Klasse = „text-5xl text-center“ > Marge In Rückenwind-CSS P >
div >
Körper >
Ausgabe 
Die obige Ausgabe zeigt den Rand zur Ober- und Unterseite des Containers. Dies zeigt an, dass der vertikale Rand effektiv auf das Containerelement angewendet wurde. Abschluss