In Tailwind CSS, a Marge wird verwendet, um den Abstand um das spezifische Element herum zu steuern. Es fügt Platz zwischen dem angewendeten Element und seinen umgebenden Elementen hinzu. Tailwind CSS bietet eine Reihe von Randdienstprogrammen und Randwerten, mit denen Benutzer den Abstand um gewünschte Elemente anpassen können. Darüber hinaus können Benutzer einen Rand zu einer einzelnen Seite hinzufügen, beispielsweise oben, unten, links oder rechts eines bestimmten Elements.
In diesem Blog werden Beispiele zum Hinzufügen von Rändern zu einer einzelnen Seite eines Elements in Tailwind CSS demonstriert.
Wie fügt man bei Rückenwind einer einzelnen Seite einen Spielraum hinzu?
Um in Tailwind einen Rand zu einer einzelnen Seite eines Elements hinzuzufügen, können die folgenden Dienstprogrammklassen verwendet werden:
Um es besser zu verstehen, gehen Sie die unten aufgeführten Beispiele durch.
Beispiel 1: Rand am oberen Rand eines Elements hinzufügen
In diesem Beispiel verwenden wir das „ mt-14 ” Utility-Klasse in der „ Ausgabe Beispiel 2: Rand am unteren Rand eines Elements hinzufügen In diesem Beispiel verwenden wir das „ mb-14 ”-Klasse in der „ Beispiel 3: Rand links von einem Element hinzufügen In diesem Beispiel verwenden wir das „ ml-14 ”-Klasse in der „ Beispiel 4: Rand rechts von einem Element hinzufügen In diesem Beispiel verwenden wir das „ Herr-14 ”-Klasse in der „ Um in Tailwind einen Rand zu einer einzelnen Seite eines Elements hinzuzufügen, können verschiedene Dienstprogrammklassen verwendet werden, wie zum Beispiel „ ml-
< div Klasse = „h-96 mt-14 bg-purple-500“ >
< P Klasse = „text-5xl text-center“ > Marge In Rückenwind-CSS P >
div >
Körper >
Hier:
Die obige Ausgabe zeigt, dass der Rand oben im Container hinzugefügt wurde.
< div Klasse = „h-96 mb-14 bg-purple-500“ >
< P Klasse = „text-5xl text-center“ > Marge In Rückenwind-CSS P >
div >
Körper >
Ausgabe
Es ist zu erkennen, dass der Rand am Boden des Behälters hinzugefügt wurde.
< div Klasse = „h-96 ml-14 bg-purple-500“ >
< P Klasse = „text-5xl text-center“ > Marge In Rückenwind-CSS P >
div >
Körper >
Ausgabe
Die obige Ausgabe zeigt, dass der Rand links vom Containerelement hinzugefügt wurde.
< div Klasse = „h-96 mr-14 bg-purple-500“ >
< P Klasse = „text-5xl text-center“ > Marge In Rückenwind-CSS P >
div >
Körper >
Ausgabe
Wie Sie sehen können, wurde der Rand effizient auf der rechten Seite des Containers hinzugefügt. Abschluss