Kako dodati podstavu na jednu stranu u Tailwindu?

Kako Dodati Podstavu Na Jednu Stranu U Tailwindu



U Tailwind CSS-u, ispuna se koristi za dodavanje razmaka između sadržaja određenog elementa i njegovih granica. Dodaje dodatni razmak unutar elementa. Tailwind CSS pruža skup uslužnih programa za popunjavanje i vrijednosti popunjavanja koji korisnicima dopuštaju prilagodbu razmaka željenih elemenata. Štoviše, korisnici mogu dodati podstavu na jednu stranu, kao što je vrh, dno, lijevo ili desno određenog elementa.

Ovaj će blog pokazati primjere dodavanja ispune jednoj strani elementa u Tailwind CSS-u.







Kako dodati podstavu na jednu stranu u Tailwindu?

Za dodavanje ispune jednoj strani elementa u Tailwindu, mogu se koristiti sljedeće klase uslužnih programa:



Da biste to bolje razumjeli, pogledajte dolje navedene primjere.



Primjer 1: Dodajte ispunu na vrh elementa





U ovom primjeru koristit ćemo ' pt-10 ' klasa korisnosti u '

” za dodavanje 10 jedinica ispune na njegov vrh:

< tijelo >

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

tijelo >


Izlaz




Gornji rezultat pokazuje da je podstava dodana na vrh spremnika.

Primjer 2: Dodajte ispunu na dno elementa

U ovom primjeru koristit ćemo ' pb-10 ' razred u '

” za dodavanje 10 jedinica ispune na njegovo dno:

< tijelo >

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

tijelo >


Izlaz


Može se vidjeti da je podstava dodana na dno posude.

Primjer 3: Dodajte ispunu s desne strane elementa

U ovom primjeru koristit ćemo ' pr-10 ' razred u '

” za dodavanje 10 jedinica ispune s desne strane:

< tijelo >

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

tijelo >


Izlaz


Gornji izlaz pokazuje da je ispuna dodana s desne strane elementa spremnika.

Primjer 4: Dodajte ispunu s lijeve strane elementa

U ovom primjeru koristit ćemo ' pl-10 ' razred u '

” za dodavanje 10 jedinica ispune s lijeve strane:

< tijelo >

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

tijelo >


Izlaz


Može se primijetiti da je podstava dodana lijevo od spremnika.

Zaključak

Za dodavanje ispune jednoj strani elementa u Tailwindu, mogu se koristiti različite klase korisnih programa, kao što je ' pl- ”, “ pr- ”, “ pt- ', i ' pb- ”. Ove klase dodaju ispunu lijevoj, desnoj, gornjoj i donjoj strani određenog elementa. Korisnici mogu odrediti različite vrijednosti za veličinu ispune. Ovaj blog pokazao je primjere dodavanja ispune jednoj strani elementa u Tailwind CSS-u.