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 ' Eksempel 2: Tilføj polstring til bunden af et element I dette eksempel vil vi bruge ' pb-10 ' klasse i ' Eksempel 3: Tilføj polstring til højre for et element I dette eksempel vil vi bruge ' pr-10 ' klasse i ' Eksempel 4: Tilføj polstring til venstre for et element I dette eksempel vil vi bruge ' pl-10 ' klasse i ' For at tilføje polstring til en enkelt side af et element i Tailwind, kan forskellige hjælpeklasser bruges, såsom ' pl-
< 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.
< 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.
< 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.
< 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