Hvordan legge til polstring på en enkelt side i medvind?

Hvordan Legge Til Polstring Pa En Enkelt Side I Medvind



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 '

'-element for å legge til 10 enheter med polstring på toppen:

< kropp >

< 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.

Eksempel 2: Legg til polstring i bunnen av et element

I dette eksemplet vil vi bruke ' pb-10 '-klassen i '

'-element for å legge til 10 enheter med polstring i bunnen:

< kropp >

< 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.

Eksempel 3: Legg til polstring til høyre for et element

I dette eksemplet vil vi bruke ' pr-10 '-klassen i '

'-element for å legge til 10 enheter med polstring til høyre:

< kropp >

< 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.

Eksempel 4: Legg til polstring til venstre for et element

I dette eksemplet vil vi bruke ' pl-10 '-klassen i '

'-element for å legge til 10 enheter med polstring til venstre:

< kropp >

< 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

For å legge til polstring på en enkelt side av et element i Tailwind, kan forskjellige verktøyklasser brukes, for eksempel ' pl- ', ' pr- ', ' pt- ', og ' pb- '. Disse klassene legger til polstring på henholdsvis venstre, høyre, øvre og nedre side av det spesifikke elementet. Brukere kan angi forskjellige verdier for størrelsen på polstringen. Denne bloggen har vist eksempler for å legge til polstring på en enkelt side av et element i Tailwind CSS.