Wie füge ich in Tailwind horizontale und vertikale Polsterung hinzu?

Wie Fuge Ich In Tailwind Horizontale Und Vertikale Polsterung Hinzu



In Tailwind CSS, Polsterung ist der Raum zwischen dem Inhalt des spezifischen Elements und seinem Rand. Horizontale Polsterung ist der Raum auf der linken und rechten Seite des Elements, wohingegen vertikale Polsterung ist der Abstand oben und unten auf einem Element. Tailwind bietet verschiedene Utility-Klassen, um den gewünschten Elementen horizontale oder vertikale Polsterung hinzuzufügen.

Dieser Artikel soll Folgendes veranschaulichen:







Wie füge ich in Tailwind horizontale Polsterung hinzu?

Um einem Element in Tailwind horizontalen Abstand hinzuzufügen, wird die Klasse „px-“ mit dem gewünschten Element im HTML-Programm verwendet. Benutzer können unterschiedliche Werte für die Größe der Polsterung angeben. Diese Klasse fügt Auffüllung entlang der x-Achse hinzu, d. h. sowohl auf der linken als auch auf der rechten Seite des Elements.



Syntax



< Element Klasse = „px-0 …“ > ... Element >


Hier steht „px“ für die „x-Achse“ oder „horizontale Polsterung“.





Beispiel: Horizontales Auffüllen auf ein HTML-Element anwenden

In diesem Beispiel verwenden wir das „ px-20 ” Utility-Klasse mit dem „

”-Element, um horizontale Polsterung hinzuzufügen:



< Körper >

< div Klasse = „bg-pink-600 px-20 w-max“ >
Polsterung In Rückenwind-CSS
div >

Körper >


Ausgang


Die obige Ausgabe zeigt die Polsterung auf der linken und rechten Seite des Containers. Dies zeigt an, dass die horizontale Polsterung erfolgreich auf das Containerelement angewendet wurde.

Wie füge ich in Tailwind vertikale Polsterung hinzu?

Um einem Element in Tailwind vertikale Polsterung hinzuzufügen, verwenden Sie die Option „ py- ” Dienstprogrammklasse mit dem spezifischen Element im HTML-Programm. Diese Klasse fügt Polsterung entlang der y-Achse hinzu, d. h. sowohl an der Ober- als auch an der Unterseite des Elements.

Syntax

< Element Klasse = „py-0 …“ > ... Element >


Hier steht „py“ für die „y-Achse“ oder den „vertikalen Abstand“.

Beispiel: Vertikales Auffüllen auf ein HTML-Element anwenden

In diesem Beispiel verwenden wir das „ py-20 ” Utility-Klasse mit dem „

”-Element, um vertikale Polsterung hinzuzufügen:

< Körper >

< div Klasse = „bg-pink-600 py-20 w-max“ >
Polsterung In Rückenwind-CSS
div >

Körper >


Ausgang


Die obige Ausgabe zeigt die Polsterung an der Ober- und Unterseite des Containers. Dies zeigt an, dass die vertikale Polsterung effektiv am Containerelement angebracht wurde.

Abschluss

Um die horizontale und vertikale Polsterung in Tailwind hinzuzufügen, muss „ px- ' Und ' py- „Utility-Klassen werden jeweils mit den gewünschten Elementen im HTML-Programm verwendet. Benutzer können unterschiedliche Werte angeben, um den Abstand links und rechts bzw. oben und unten an einem Element anzuwenden. In diesem Artikel wurde die vollständige Methode zum Anwenden horizontaler und vertikaler Polsterung in Tailwind veranschaulicht.