I Tailwind CSS, polstring er rommet mellom det spesifikke elementets innhold og dets grense. Horisontal polstring er mellomrommet på venstre og høyre side av elementet, mens vertikal polstring er plassen på toppen og bunnen av et element. Tailwind tilbyr ulike bruksklasser for å legge til horisontal eller vertikal polstring til de ønskede elementene.
Denne artikkelen vil illustrere:
Hvordan legge til horisontal polstring i medvind?
For å legge til horisontal polstring til et element i Tailwind, brukes klassen 'px-
Syntaks
< element klasse = 'px-0 ...' > ... element >
Her representerer 'px' 'x-aksen' eller 'horisontal polstring'.
Eksempel: Bruk av horisontal utfylling på et HTML-element
I dette eksemplet vil vi bruke ' px-20 ' bruksklasse med ' For å legge til vertikal polstring til et element i Tailwind, bruk ' py- Syntaks Eksempel: Bruk av vertikal utfylling på et HTML-element I dette eksemplet vil vi bruke ' py-20 ' bruksklasse med ' For å legge til horisontal og vertikal polstring i Tailwind, ' px-
< kropp >
< div klasse = 'bg-pink-600 px-20 w-max' >
Polstring i Medvind CSS
div >
kropp >
Produksjon
Utgangen ovenfor viser polstringen til venstre og høyre side av beholderen. Dette indikerer at den horisontale polstringen er påført beholderelementet vellykket. Hvordan legge til vertikal polstring i medvind?
Her representerer 'py' 'y-aksen' eller 'vertikal polstring'.
< div klasse = 'bg-pink-600 py-20 w-max' >
Polstring i Medvind CSS
div >
kropp >
Produksjon
Utgangen ovenfor viser polstringen til toppen og bunnen av beholderen. Dette indikerer at den vertikale polstringen er effektivt påført beholderelementet. Konklusjon