Hvordan tilføjer man polstring til en enkelt side i medvind?

Hvordan Tilfojer Man Polstring Til En Enkelt Side I Medvind



I Tailwind CSS bruges polstring til at tilføje mellemrum mellem det specifikke elements indhold og dets grænser. Det tilføjer ekstra afstand inde i elementet. Tailwind CSS giver et sæt af polstringsværktøjer og polstringsværdier, der tillader brugere at tilpasse afstanden mellem de ønskede elementer. Desuden kan brugere tilføje polstring til en enkelt side, såsom toppen, bunden, venstre eller højre for et bestemt element.

Denne blog vil demonstrere eksemplerne på at tilføje polstring til en enkelt side af et element i Tailwind CSS.







Hvordan tilføjer man polstring til en enkelt side i medvind?

For at tilføje polstring til en enkelt side af et element i Tailwind, kan følgende hjælpeklasser bruges:



For at forstå det bedre, tjek nedenstående eksempler.



Eksempel 1: Tilføj polstring til toppen af ​​et element





I dette eksempel vil vi bruge ' pt-10 ' brugsklasse i '

” element for at tilføje 10 enheder polstring øverst:

< legeme >

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

legeme >


Produktion




Ovenstående output viser, at polstringen er blevet tilføjet til toppen af ​​beholderen.

Eksempel 2: Tilføj polstring til bunden af ​​et element

I dette eksempel vil vi bruge ' pb-10 ' klasse i '

” element for at tilføje 10 enheder polstring i bunden:

< legeme >

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

legeme >


Produktion


Det kan ses, at polstringen er blevet tilføjet til beholderens bund.

Eksempel 3: Tilføj polstring til højre for et element

I dette eksempel vil vi bruge ' pr-10 ' klasse i '

” element for at tilføje 10 enheder polstring til højre:

< legeme >

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

legeme >


Produktion


Ovenstående output viser, at polstringen er tilføjet til højre for beholderelementet.

Eksempel 4: Tilføj polstring til venstre for et element

I dette eksempel vil vi bruge ' pl-10 ' klasse i '

” element for at tilføje 10 enheder polstring til venstre:

< legeme >

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

legeme >


Produktion


Det kan ses, at polstringen er blevet tilføjet til venstre på beholderen.

Konklusion

For at tilføje polstring til en enkelt side af et element i Tailwind, kan forskellige hjælpeklasser bruges, såsom ' pl- ', ' pr- ', ' pt- ', og ' pb- ”. Disse klasser tilføjer polstring til det specifikke elements henholdsvis venstre, højre, øverste og nederste side. Brugere kan angive forskellige værdier for størrelsen af ​​polstringen. Denne blog har vist eksempler på at tilføje polstring til en enkelt side af et element i Tailwind CSS.