paddingCSS nuosavybė apibrėžia giliausią dalį dėžutės modelis, kuriant erdvę aplink elemento turinį, viduje jokių apibrėžtų ribų ir / ar sienų.
Pildymo reikšmės nustatomos naudojant ilgius ar procentus ir negali priimti neigiamų verčių. Pradinė arba numatytoji visų užpildų savybių vertė yra 0.
Štai paprastas pavyzdys:
.box ( padding: 0 1.5em 0 1.5em; )Aukščiau pateiktame pavyzdyje naudojama paddingypatybė „stenografija“, kuri priima iki keturių čia parodytų verčių:
.box ( padding: || || || )Jei nustatoma mažiau nei keturios reikšmės, trūkstamos vertės laikomos pagrįstomis apibrėžtomis. Pvz., Šie du taisyklių rinkiniai gautų identiškus rezultatus:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Taigi, jei apibrėžta tik viena reikšmė, visos keturios užpildymo savybės nustatomos ta pačia verte:
.box ( padding: 20px; )Jei deklaruojamos trys vertės, tai yra padding: (top) (left-and-right) (bottom);.
Bet kurią iš atskirų užpildymo savybių galima deklaruoti naudojant „longhand“, tokiu atveju kiekvienai nuosavybei apibrėžtumėte tik vieną vertę. Taigi ankstesnį pavyzdį būtų galima perrašyti taip:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Paminkštinimo ir elemento pločio skaičiavimai
Jei elementas turi nurodytą plotį, bet koks prie to elemento pridėtas užpildas padidins bendrą elemento plotį. Tai dažnai yra nepageidaujamas rezultatas, nes tam reikia, kad elemento plotis būtų perskaičiuotas kiekvieną kartą, kai koreguojamas paminkštinimas. (Atkreipkite dėmesį, kad tai atsitinka ir su aukščiu, tačiau daugeliu atvejų pageidautina nesuteikti elementui nustatyto aukščio.)
Pavyzdžiui:
.box ( padding: 20px; width: 400px; )Šiame pavyzdyje, nors .boxelementui suteikiamas aiškus 400 taškų plotis, faktinis pateikto elemento plotis puslapyje bus 440 taškų. Tai atsižvelgia ne tik į 400 taškų pločio, bet ir į 20 taškų kairiojo užpildo ir 20 taškų į dešinįjį užpildymą (ankstesniame pavyzdyje apibrėžta su užpildo trumpiniu).
Taip nutinka norint išlaikyti 400 taškų turinio erdvę, o ne 400 taškų viso elemento pločio. Tai demonstruojantis rašiklis:
Tai atsitinka visose naudojamose naršyklėse, standartiniame režime, bet neįvyks IE6 ir IE7 keistenybių režimu (tai yra puslapiuose, rodomuose IE6 arba IE7, kur nėra deklaruoto doctype arba kur vyksta kažkas kitas, kad sukeltų keistenybes režimas).
Norėdami išspręsti šią problemą, tokiu būdu išlaikydami 400 taškų plotį, neatsižvelgdami į užpildymo kiekį, galite naudoti box-sizingnuosavybę:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Dėl to elementas išlaiko savo plotį, tuo pačiu padidindamas užpildymą ir taip sumažindamas turimą erdvę. Čia yra demonstracija:
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Taip | Taip | Taip | Taip | Taip | Taip | Taip |