paddingNekretnina u CSS definira najdublji dio box modela, stvaranje prostora oko sadržaj nekog elementa, unutar bilo definiranim rubovima i / ili granica.
Vrijednosti dodavanja postavljaju se prema duljinama ili postocima i ne mogu prihvatiti negativne vrijednosti. Početna, odnosno zadana vrijednost za sva svojstva popunjavanja je 0.
Evo jednostavnog primjera:
.box ( padding: 0 1.5em 0 1.5em; )Gornji primjer koristi paddingstenografsko svojstvo koje prihvaća do četiri vrijednosti, ovdje prikazane:
.box ( padding: || || || )Ako je postavljeno manje od četiri vrijednosti, vrijednosti koje nedostaju pretpostavljaju se na temelju definiranih. Na primjer, sljedeća dva skupa pravila dobila bi identične rezultate:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Dakle, ako je definirana samo jedna vrijednost, ovo postavlja sva četiri svojstva dodavanja na istu vrijednost:
.box ( padding: 20px; )Ako su deklarirane tri vrijednosti, jest padding: (top) (left-and-right) (bottom);.
Bilo koje od pojedinačnih svojstava popunjavanja može se deklarirati pomoću longhanda, u tom biste slučaju definirali samo jednu vrijednost po svojstvu. Tako bi se prethodni primjer mogao prepisati kako slijedi:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Izračun obloga i širine elementa
Ako element ima navedenu širinu, bilo koji dodatak dodan tom elementu dodati će ukupnoj širini elementa. To je često nepoželjan rezultat, jer zahtijeva ponovnu izračun širine elementa svaki put kada se podmetanje podesi. (Imajte na umu da se to događa i s visinom, ali u većini slučajeva poželjno je ne dati elementu zadanu visinu.)
Na primjer:
.box ( padding: 20px; width: 400px; )U ovom primjeru, iako je .boxelementu dana eksplicitna širina od 400 piksela, stvarna prikazana širina elementa na stranici bit će 440 piksela. To uzima u obzir ne samo širinu od 400 piksela, već i 20 piksela lijevog i 20 piksela desnog jastuka (definirano skraćenicom za padding u prethodnom primjeru).
To se događa radi održavanja 400 piksela prostora sadržaja, a ne 400 piksela ukupne širine elementa. Evo olovke koja to pokazuje:
To se događa u svim preglednicima u upotrebi, u standardnom načinu rada, ali se neće dogoditi u IE6 i IE7 u quirks načinu (to jest, na stranicama prikazanim u IE6 ili IE7 na kojima nema deklariranog doktorskog tipa ili tamo gdje se nešto drugo događa da bi pokrenulo quirkove način rada).
Da biste riješili ovaj problem, zadržavajući tako širinu od 400 piksela, bez obzira na količinu popunjavanja, možete koristiti box-sizingsvojstvo:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )To uzrokuje da element zadrži svoju širinu, istodobno povećavajući obloge, smanjujući tako raspoloživi prostor sadržaja. Evo demonstracije:
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | Da | Da | Da | Da |