Kako dodati podstavu na sve strane u Tailwindu?

Kako Dodati Podstavu Na Sve Strane U Tailwindu



Tailwind CSS dobro je poznati okvir koji se koristi za stvaranje prilagodljivih i responzivnih web stranica ili dizajna. Također omogućuje korisnicima da kontroliraju izgled i razmak između elemenata bez pisanja prilagođenog CSS-a. Ispuna je prostor između sadržaja određenog elementa i njegove granice. Ponekad korisnici žele primijeniti istu količinu ispune na svaku stranu elementa. Tailwind pruža uslužne klase za primjenu ispune na sve strane elementa ili na određene strane, kao što su gornja, desna, donja ili lijeva.

Ovaj će članak ilustrirati metodu dodavanja ispuna na sve strane elementa u Tailwindu.







Kako dodati podstavu na sve strane u Tailwindu?

Da biste dodali ispunu na sve strane određenog elementa u Tailwindu, napravite HTML strukturu. Zatim upotrijebite klasu uslužnog programa “p-” s određenim elementom. Potrebno je navesti željenu vrijednost za primjenu ispune na element. Zatim provjerite HTML web stranicu kako biste osigurali promjene.



Sintaksa



< element razreda = 'p-' ... element >


Zamijenite “” bilo kojim željenim brojem, poput 2, 4, 12, 20 itd.





Primjer

U ovom primjeru imamo dva '

' i primijenit ćemo dva različita ispuna, tj. ' p-8 ' i ' str-14 ' na njima:



< tijelo >

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

< br >

< div razreda = 'bg-teal-600 p-14 w-max' >
Padding u Stražnji vjetar CSS
div >

tijelo >


Ovdje, u prvom

:

    • bg-ružičasta-600 ” klasa postavlja ružičastu boju na pozadinu
      elementa.
    • p-8 ” klasa dodaje 8 jedinica podloge na sve strane spremnika.
    • w-maks ” klasa postavlja širinu elementa
      na maksimalnu širinu sadržaja.

U drugom

:

    • bg-teal-600 ” klasa postavlja plavozelenu boju na pozadinu elementa
      .
    • str-14 ” klasa primjenjuje 14 jedinica podloge na sve strane spremnika.
    • w-maks ” klasa postavlja širinu elementa
      na maksimalnu širinu sadržaja.

Izlaz


Prema gornjem izlazu, navedeno punjenje primijenjeno je na sve strane oba spremnika.

Zaključak

Za dodavanje ispune na sve strane elementa u Tailwindu, klasa pomoćnih programa “p-” koristi se sa željenim elementom u HTML programu. Korisnici moraju navesti određenu vrijednost za primjenu ispune na element. Za provjeru provjerite HTML web stranicu i osigurajte promjene. Ovaj članak je primjer metode za dodavanje ispune na sve strane elementa u Tailwindu.