Kako dodati oblazinjenje na eno stran v Tailwindu?

Kako Dodati Oblazinjenje Na Eno Stran V Tailwindu



V Tailwind CSS se oblazinjenje uporablja za dodajanje prostora med vsebino določenega elementa in njegovimi robovi. Doda dodaten razmik znotraj elementa. Tailwind CSS ponuja nabor pripomočkov za oblazinjenje in vrednosti oblazinjenja, ki uporabnikom omogočajo prilagajanje razmika med želenimi elementi. Poleg tega lahko uporabniki dodajo oblazinjenje na posamezno stran, na primer na zgornji, spodnji, levi ali desni strani določenega elementa.

Ta spletni dnevnik bo prikazal primere dodajanja oblazinjenja eni strani elementa v Tailwind CSS.







Kako dodati oblazinjenje na eno stran v Tailwindu?

Če želite dodati oblazinjenje na posamezno stran elementa v Tailwindu, lahko uporabite naslednje razrede pripomočkov:



Za boljše razumevanje si oglejte spodnje primere.



1. primer: dodajte oblazinjenje na vrh elementa





V tem primeru bomo uporabili » točka-10 ' razred uporabnosti v '

” za dodajanje 10 enot oblazinjenja na njegov vrh:

< telo >

< div razred = 'bg-roza-600 pt-10 w-max' >
Oblazinjenje v CSS hrbtnega vetra
div >

telo >


Izhod




Zgornji rezultat kaže, da je bilo oblazinjenje dodano na vrh vsebnika.

2. primer: dodajte oblazinjenje na dno elementa

V tem primeru bomo uporabili » pb-10 ' razred v '

” za dodajanje 10 enot oblazinjenja na njegovem dnu:

< telo >

< div razred = 'bg-roza-600 pb-10 w-max' >
Oblazinjenje v CSS hrbtnega vetra
div >

telo >


Izhod


Vidi se, da je polnilo dodano na dno posode.

Primer 3: Dodajanje odmika na desno od elementa

V tem primeru bomo uporabili » pr-10 ' razred v '

” za dodajanje 10 enot oblazinjenja na njegovi desni:

< telo >

< div razred = 'bg-roza-600 pr-10 w-max' >
Oblazinjenje v CSS hrbtnega vetra
div >

telo >


Izhod


Zgornji izhod kaže, da je bilo oblazinjenje dodano na desno od elementa vsebnika.

4. primer: dodajte oblazinjenje na levi strani elementa

V tem primeru bomo uporabili » pl-10 ' razred v '

” za dodajanje 10 enot oblazinjenja na njegovi levi:

< telo >

< div razred = 'bg-roza-600 pl-10 w-max' >
Oblazinjenje v CSS hrbtnega vetra
div >

telo >


Izhod


Opazimo lahko, da je bilo oblazinjenje dodano na levi strani vsebnika.

Zaključek

Če želite dodati oblazinjenje na posamezno stran elementa v Tailwindu, lahko uporabite različne razrede uporabnosti, kot je ' pl- ”, “ pr- ”, “ pt- «, in » pb- ”. Ti razredi dodajo oblazinjenje na levi, desni, zgornji in spodnji strani določenega elementa. Uporabniki lahko določijo različne vrednosti za velikost oblazinjenja. Ta spletni dnevnik prikazuje primere dodajanja oblazinjenja eni strani elementa v Tailwind CSS.