Kako dodati vodoravnu i okomitu podlogu u Tailwind?

Kako Dodati Vodoravnu I Okomitu Podlogu U Tailwind



U Tailwind CSS-u, podstava je prostor između sadržaja određenog elementa i njegove granice. Horizontalna podstava je prostor s lijeve i desne strane elementa, dok je okomito padding je prostor na vrhu i dnu elementa. Tailwind nudi različite uslužne klase za dodavanje vodoravne ili okomite ispune željenim elementima.

Ovaj će članak ilustrirati:







Kako dodati vodoravnu podlogu u Tailwind?

Za dodavanje vodoravnog ispuna elementu u Tailwindu, koristi se klasa “px-” sa željenim elementom u HTML programu. Korisnici mogu odrediti različite vrijednosti za veličinu ispune. Ova klasa dodaje ispunu duž x-osi, tj. na lijevu i desnu stranu elementa.



Sintaksa



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


Ovdje 'px' predstavlja 'x-os' ili 'horizontalnu ispunu'.





Primjer: Primjena horizontalnog ispuna na HTML element

U ovom primjeru koristit ćemo ' px-20 ' klasa korisnosti s '

” da biste mu dodali vodoravno ispunjavanje:



< tijelo >

< div razreda = 'bg-ružičasta-600 px-20 w-max' >
Padding u Stražnji vjetar CSS
div >

tijelo >


Izlaz


Gornji izlaz prikazuje ispunu lijeve i desne strane spremnika. Ovo označava da je vodoravna ispuna uspješno primijenjena na element spremnika.

Kako dodati okomitu podlogu u Tailwind?

Za dodavanje okomitog ispuna elementu u Tailwindu, koristite ' py- ” uslužna klasa s određenim elementom u HTML programu. Ova klasa dodaje ispunu duž y-osi, tj. na gornju i donju stranu elementa.

Sintaksa

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


Ovdje 'py' predstavlja 'y-os' ili 'vertikalno punjenje'.

Primjer: Primjena okomitog ispuna na HTML element

U ovom primjeru koristit ćemo ' py-20 ' klasa korisnosti s '

” da biste mu dodali okomito ispunjavanje:

< tijelo >

< div razreda = 'bg-pink-600 py-20 w-max' >
Padding u Stražnji vjetar CSS
div >

tijelo >


Izlaz


Gornji rezultat prikazuje podstavu gornje i donje strane spremnika. Ovo označava da je okomito ispunjavanje učinkovito primijenjeno na element spremnika.

Zaključak

Za dodavanje vodoravne i okomite ispune u Tailwind, ' px- ' i ' py- ” klase korisnih programa koriste se sa željenim elementima u HTML programu. Korisnici mogu navesti različite vrijednosti za primjenu ispune na lijevo i desno ili na vrh i dno elementa. Ovaj je članak ilustrirao cjelovitu metodu primjene vodoravne i okomite ispune u Tailwindu.