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-
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 „ Um einem Element in Tailwind vertikale Polsterung hinzuzufügen, verwenden Sie die Option „ py- Syntax Beispiel: Vertikales Auffüllen auf ein HTML-Element anwenden In diesem Beispiel verwenden wir das „ py-20 ” Utility-Klasse mit dem „ Um die horizontale und vertikale Polsterung in Tailwind hinzuzufügen, muss „ px-
< 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?
Hier steht „py“ für die „y-Achse“ oder den „vertikalen Abstand“.
< 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