Hvordan tilføjer man polstring til alle sider i medvind?

Hvordan Tilfojer Man Polstring Til Alle Sider I Medvind



Tailwind CSS er en velkendt ramme, der bruges til at skabe tilpassede og responsive websider eller designs. Det giver også brugere mulighed for at kontrollere layoutet og afstanden mellem elementer uden at skrive nogen tilpasset CSS. Polstring er rummet mellem det bestemte elements indhold og dets grænse. Nogle gange ønsker brugere at anvende den samme mængde polstring på hver side af et element. Tailwind giver hjælpeklasser til at anvende polstring på alle sider af et element eller på bestemte sider, såsom top, højre, bund eller venstre.

Denne artikel vil eksemplificere metoden til at tilføje polstring til alle sider af et element i Tailwind.







Hvordan tilføjer man polstring til alle sider i medvind?

For at tilføje polstring til alle sider af et bestemt element i Tailwind skal du lave en HTML-struktur. Brug derefter hjælpeklassen 'p-' med det bestemte element. Det er nødvendigt at angive den ønskede værdi for at anvende polstring til et element. Tjek derefter HTML-websiden for at sikre ændringer.



Syntaks



< element klasse = 'p-' ... element >


Erstat '' med et hvilket som helst ønsket tal, såsom 2, 4, 12, 20 osv.





Eksempel

I dette eksempel har vi to '

' elementer, og vi vil anvende to forskellige polstringer, dvs. ' s-8 ' og ' s-14 ' på dem:



< legeme >

< div klasse = 'bg-pink-600 p-8 w-max' >
Polstring i Medvind CSS
div >

< br >

< div klasse = 'bg-teal-600 p-14 w-max' >
Polstring i Medvind CSS
div >

legeme >


Her, i første

:

    • bg-pink-600 ” klasse indstiller den lyserøde farve til
      -elementets baggrund.
    • s-8 ” klasse tilføjer de 8 enheder af polstring til containerens alle sider.
    • w-max ” klasse indstiller bredden af ​​
      -elementet til dets maksimale indholdsbredde.

I den anden

:

    • bg-teal-600 ” klasse sætter blågrøn farve til baggrunden for
      -elementet.
    • s-14 ”-klassen anvender 14 enheder polstring på containerens alle sider.
    • w-max ” klasse indstiller bredden af ​​
      -elementet til dets maksimale indholdsbredde.

Produktion


I henhold til ovenstående output er den specificerede polstring blevet påført på alle sider af begge beholdere.

Konklusion

For at tilføje polstring til alle sider af et element i Tailwind, bruges hjælpeklassen 'p-' med det ønskede element i HTML-programmet. Brugere skal angive den specifikke værdi for at anvende polstring til et element. For verifikation, tjek HTML-websiden og sørg for ændringer. Denne artikel har eksemplificeret metoden til at tilføje polstring til alle sider af et element i Tailwind.