Wie fügt man bei Rückenwind einer einzelnen Seite einen Spielraum hinzu?

Wie Fugt Man Bei Ruckenwind Einer Einzelnen Seite Einen Spielraum Hinzu



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 „

”-Element, um oben 14 Einheiten Rand hinzuzufügen:

< Körper >

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



    • h-96 Die Klasse „Setzt die Höhe des
      -Containers auf 96 Einheiten.
    • mt-14 Die Klasse wendet 14 Randeinheiten auf die Oberseite des Containers an.
    • bg-lila-500 Die Klasse „ legt die violette Farbe auf den Hintergrund des Containers fest.

Ausgabe


Die obige Ausgabe zeigt, dass der Rand oben im Container hinzugefügt wurde.

Beispiel 2: Rand am unteren Rand eines Elements hinzufügen

In diesem Beispiel verwenden wir das „ mb-14 ”-Klasse in der „

”-Element, um am unteren Rand 14 Einheiten Rand hinzuzufügen:

< Körper >

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

Beispiel 3: Rand links von einem Element hinzufügen

In diesem Beispiel verwenden wir das „ ml-14 ”-Klasse in der „

”-Element, um links 14 Einheiten Rand hinzuzufügen:

< Körper >

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

Beispiel 4: Rand rechts von einem Element hinzufügen

In diesem Beispiel verwenden wir das „ Herr-14 ”-Klasse in der „

”-Element, um rechts davon 14 Einheiten Rand hinzuzufügen:

< Körper >

< 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

Um in Tailwind einen Rand zu einer einzelnen Seite eines Elements hinzuzufügen, können verschiedene Dienstprogrammklassen verwendet werden, wie zum Beispiel „ ml- “, „ mr- “, „ mt- ', Und ' mb- “. Diese Klassen fügen der linken, rechten, oberen und unteren Seite des jeweiligen Elements einen Rand hinzu. Benutzer können unterschiedliche Werte für die Größe des Randes angeben. In diesem Blog wurden Beispiele für das Hinzufügen von Rändern zu einer einzelnen Seite eines Elements in Tailwind CSS gezeigt.