Kako dodati vodoravno in navpično oblazinjenje v Tailwind?

Kako Dodati Vodoravno In Navpicno Oblazinjenje V Tailwind



V Tailwind CSS, oblazinjenje je prostor med vsebino določenega elementa in njegovo mejo. Vodoravno oblazinjenje je prostor na levi in ​​desni strani elementa, medtem ko je navpično oblazinjenje je prostor na vrhu in dnu elementa. Tailwind ponuja različne razrede uporabnosti za dodajanje vodoravnih ali navpičnih oblazinjenj želenim elementom.

Ta članek bo ponazoril:







Kako dodati vodoravno oblazinjenje v Tailwind?

Za dodajanje vodoravnega oblazinjenja elementu v Tailwindu se z želenim elementom v programu HTML uporabi razred »px-«. Uporabniki lahko določijo različne vrednosti za velikost oblazinjenja. Ta razred doda oblazinjenje vzdolž osi x, tj. na levi in ​​desni strani elementa.



Sintaksa



< element razred = 'px-0 ...' > ... element >


Tu 'px' predstavlja 'os x' ali 'vodoravno oblazinjenje'.





Primer: uporaba vodoravnega oblazinjenja za element HTML

V tem primeru bomo uporabili » px-20 ' razred uporabnosti z '

”, da mu dodate vodoravno oblazinjenje:



< telo >

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

telo >


Izhod


Zgornji rezultat prikazuje oblazinjenje na levi in ​​desni strani vsebnika. To pomeni, da je bilo vodoravno oblazinjenje uspešno uporabljeno za vsebniški element.

Kako dodati navpično oblazinjenje v Tailwind?

Če želite elementu v Tailwindu dodati navpično oblazinjenje, uporabite » py- ” razred pripomočkov s posebnim elementom v programu HTML. Ta razred doda oblazinjenje vzdolž osi y, tj. na zgornji in spodnji strani elementa.

Sintaksa

< element razred = 'py-0 ...' > ... element >


Tukaj 'py' predstavlja 'y-os' ali 'navpično oblazinjenje'.

Primer: uporaba navpičnega polnila za element HTML

V tem primeru bomo uporabili » py-20 ' razred uporabnosti z '

”, da mu dodate navpično oblazinjenje:

< telo >

< div razred = 'bg-pink-600 py-20 w-max' >
Oblazinjenje v CSS hrbtnega vetra
div >

telo >


Izhod


Zgornji rezultat prikazuje oblazinjenje zgornje in spodnje strani vsebnika. To pomeni, da je bilo navpično oblazinjenje učinkovito uporabljeno za vsebniški element.

Zaključek

Če želite v Tailwind dodati vodoravno in navpično oblazinjenje, uporabite » px- « in » py- ” Razredi pripomočkov se uporabljajo z želenimi elementi v programu HTML oz. Uporabniki lahko določijo različne vrednosti za uporabo oblazinjenja na levi in ​​desni ali zgornji in spodnji strani elementa. Ta članek je prikazal celotno metodo za uporabo vodoravnega in navpičnega oblazinjenja v Tailwindu.