Wie füge ich bei Rückenwind Polsterung an allen Seiten hinzu?

Wie Fuge Ich Bei Ruckenwind Polsterung An Allen Seiten Hinzu



Tailwind CSS ist ein bekanntes Framework, das zum Erstellen anpassbarer und responsiver Webseiten oder Designs verwendet wird. Außerdem können Benutzer das Layout und den Abstand von Elementen steuern, ohne benutzerdefiniertes CSS schreiben zu müssen. Padding ist der Abstand zwischen dem Inhalt des jeweiligen Elements und seinem Rand. Manchmal möchten Benutzer auf jeder Seite eines Elements die gleiche Menge an Polsterung anwenden. Tailwind bietet Dienstprogrammklassen zum Anwenden von Polsterungen auf alle Seiten eines Elements oder auf bestimmte Seiten, z. B. oben, rechts, unten oder links.

In diesem Artikel wird die Methode zum Hinzufügen von Auffüllungen zu allen Seiten eines Elements in Tailwind veranschaulicht.







Wie fügt man bei Rückenwind Polsterung an allen Seiten hinzu?

Um allen Seiten eines bestimmten Elements in Tailwind Polsterung hinzuzufügen, erstellen Sie eine HTML-Struktur. Verwenden Sie dann die Dienstprogrammklasse „p-“ mit dem jeweiligen Element. Es ist erforderlich, den gewünschten Wert anzugeben, um Auffüllung auf ein Element anzuwenden. Schauen Sie sich als Nächstes die HTML-Seite an, um sicherzustellen, dass Änderungen vorgenommen werden.



Syntax



< Element Klasse = „p- ... Element >


Ersetzen Sie „“ durch eine beliebige Zahl, z. B. 2, 4, 12, 20 usw.





Beispiel

In diesem Beispiel haben wir zwei „

„Elemente und wir werden zwei verschiedene Polsterungen anwenden, d. h. „ S. 8 ' Und ' S. 14 ' auf sie:



< Körper >

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

< br >

< div Klasse = „bg-teal-600 p-14 w-max“ >
Polsterung In Rückenwind-CSS
div >

Körper >


Hier im ersten

:

    • bg-rosa-600 Die Klasse „Legt die rosa Farbe für den Hintergrund des
      -Elements fest.
    • S. 8 Die Klasse „Fügt die 8 Polstereinheiten an allen Seiten des Containers hinzu.
    • w-max Die Klasse „Setzt die Breite des
      -Elements auf seine maximale Inhaltsbreite.

Im zweiten

:

    • bg-teal-600 Die Klasse „legt die blaugrüne Farbe auf den Hintergrund des
      -Elements fest.
    • S. 14 Die Klasse „wendet 14 Polstereinheiten an allen Seiten des Containers an.
    • w-max Die Klasse „Setzt die Breite des
      -Elements auf seine maximale Inhaltsbreite.

Ausgang


Gemäß der obigen Ausgabe wurde die angegebene Polsterung auf allen Seiten beider Container angebracht.

Abschluss

Um in Tailwind alle Seiten eines Elements aufzufüllen, wird die Dienstprogrammklasse „p-“ mit dem gewünschten Element im HTML-Programm verwendet. Benutzer müssen den spezifischen Wert angeben, um Auffüllung auf ein Element anzuwenden. Schauen Sie sich zur Überprüfung die HTML-Seite an und stellen Sie sicher, dass Änderungen vorgenommen werden. In diesem Artikel wurde die Methode zum Hinzufügen von Auffüllungen auf allen Seiten eines Elements in Tailwind veranschaulicht.