I Tailwind CSS brukes polstring for å legge til mellomrom mellom det spesifikke elementets innhold og dets grenser. Det legger til ekstra avstand inne i elementet. Tailwind CSS gir et sett med polstringsverktøy og polstringsverdier som lar brukere tilpasse avstanden til ønskede elementer. Dessuten kan brukere legge til polstring på en enkelt side, for eksempel toppen, bunnen, venstre eller høyre for et bestemt element.
Denne bloggen vil demonstrere eksemplene for å legge til polstring på en enkelt side av et element i Tailwind CSS.
Hvordan legge til polstring på en enkelt side i medvind?
For å legge til polstring på en enkelt side av et element i Tailwind, kan følgende verktøyklasser brukes:
For å forstå det bedre, sjekk ut eksemplene nedenfor.
Eksempel 1: Legg til polstring på toppen av et element
I dette eksemplet vil vi bruke ' pt-10 ' bruksklasse i ' Eksempel 2: Legg til polstring i bunnen av et element I dette eksemplet vil vi bruke ' pb-10 '-klassen i ' Eksempel 3: Legg til polstring til høyre for et element I dette eksemplet vil vi bruke ' pr-10 '-klassen i ' Eksempel 4: Legg til polstring til venstre for et element I dette eksemplet vil vi bruke ' pl-10 '-klassen i ' For å legge til polstring på en enkelt side av et element i Tailwind, kan forskjellige verktøyklasser brukes, for eksempel ' pl-
< div klasse = 'bg-pink-600 pt-10 w-max' >
Polstring i Medvind CSS
div >
kropp >
Produksjon
Utgangen ovenfor viser at polstringen er lagt til toppen av beholderen.
< div klasse = 'bg-pink-600 pb-10 w-max' >
Polstring i Medvind CSS
div >
kropp >
Produksjon
Det kan sees at polstringen er lagt til beholderens bunn.
< div klasse = 'bg-pink-600 pr-10 w-max' >
Polstring i Medvind CSS
div >
kropp >
Produksjon
Utgangen ovenfor viser at polstringen er lagt til høyre for beholderelementet.
< div klasse = 'bg-pink-600 pl-10 w-max' >
Polstring i Medvind CSS
div >
kropp >
Produksjon
Det kan observeres at polstringen er lagt til venstre på beholderen. Konklusjon