In Tailwind CSS wird Padding verwendet, um Platz zwischen dem Inhalt des spezifischen Elements und seinen Rändern hinzuzufügen. Es fügt zusätzlichen Abstand innerhalb des Elements hinzu. Tailwind CSS bietet eine Reihe von Padding-Dienstprogrammen und Padding-Werten, mit denen Benutzer den Abstand gewünschter Elemente anpassen können. Darüber hinaus können Benutzer eine einzelne Seite, beispielsweise oben, unten, links oder rechts, eines bestimmten Elements mit Polsterung versehen.
In diesem Blog werden Beispiele zum Hinzufügen von Auffüllungen zu einer einzelnen Seite eines Elements in Tailwind CSS demonstriert.
Wie füge ich bei Rückenwind Polsterung zu einer einzelnen Seite hinzu?
Um einer einzelnen Seite eines Elements in Tailwind Polsterung hinzuzufügen, können die folgenden Dienstprogrammklassen verwendet werden:
Um es besser zu verstehen, sehen Sie sich die unten aufgeführten Beispiele an.
Beispiel 1: Fügen Sie am oberen Rand eines Elements eine Polsterung hinzu
In diesem Beispiel verwenden wir das „ Punkt 10 ” Utility-Klasse in der „ Beispiel 2: Fügen Sie am unteren Rand eines Elements eine Polsterung hinzu In diesem Beispiel verwenden wir das „ pb-10 ”-Klasse in der „ Beispiel 3: Fügen Sie rechts von einem Element einen Abstand hinzu In diesem Beispiel verwenden wir das „ PR-10 ”-Klasse in der „ Beispiel 4: Fügen Sie links von einem Element einen Abstand hinzu In diesem Beispiel verwenden wir das „ pl-10 ”-Klasse in der „ Um einer einzelnen Seite eines Elements in Tailwind Polsterung hinzuzufügen, können verschiedene Dienstprogrammklassen verwendet werden, wie zum Beispiel „ pl-
< div Klasse = „bg-pink-600 pt-10 w-max“ >
Polsterung In Rückenwind-CSS
div >
Körper >
Ausgang
Die obige Ausgabe zeigt, dass die Polsterung oben im Container hinzugefügt wurde.
< div Klasse = „bg-pink-600 pb-10 w-max“ >
Polsterung In Rückenwind-CSS
div >
Körper >
Ausgang
Es ist zu erkennen, dass die Polsterung am Boden des Behälters angebracht wurde.
< div Klasse = „bg-pink-600 pr-10 w-max“ >
Polsterung In Rückenwind-CSS
div >
Körper >
Ausgang
Die obige Ausgabe zeigt, dass die Polsterung rechts vom Containerelement hinzugefügt wurde.
< div Klasse = „bg-pink-600 pl-10 w-max“ >
Polsterung In Rückenwind-CSS
div >
Körper >
Ausgang
Es ist zu erkennen, dass die Polsterung auf der linken Seite des Behälters angebracht wurde. Abschluss