CSS polnjenje je ena od lastnosti modela CSS box . Ta skrajšana lastnost določa blaženje okrog vseh štirih strani elementa HTML. CSS oblogo je mogoče uporabiti za skoraj vsako oznako HTML (razen nekaterih oznak na mizi). Poleg tega imajo lahko vse štiri strani elementa drugačno vrednost.
Lastnosti CSS obloge
Če želite uporabiti stenasto sličico CSS, lahko uporabite mnemonične "TRouBLe" (ali "TRiBbLe" za ljubitelje Star Trek). To je zgornja , desna , spodnja in leva , in se nanaša na vrstni red širin obloge, ki ste ga nastavili v stenskih lastnostih. Na primer:
polnjenje: zgornje desno spodaj levo; padding: 1px 2px 3px 6px;Če ste uporabili zgoraj navedene vrednosti, bi za vsako stran katerega koli elementa HTML, na katerega ga uporabljate, uporabili drugačno oblazinjeno vrednost. Če želite uporabiti isto oblazinjenje na vseh štirih straneh, lahko poenostavite svoj CSS in napišete samo eno vrednost:
padding: 12px;S to črto CSS bo na vse štiri strani elementa veljalo 12 slikovnih pik.
Če želite, da je blazinica enaka za zgoraj in spodaj ter levo in desno, lahko napišete dve vrednosti:
padding: 24px 48px;Prva vrednost (24 slikovnih pik) bi veljala zgoraj in spodaj, druga pa velja za levo in desno.
Če napišete tri vrednosti, bo vodoravno obloga (levo in desno) enaka, ob spreminjanju zgornjega in spodnjega dela:
oblazinjenje: zgornje desno in levo dno; padding: 0px 1px 3px;V skladu s CSS modelom je blazinjenje najbližje samemu elementu / vsebini. To pomeni, da se obloga doda elementu med širino ali višino vsebine in vsemi mejnimi vrednostmi, ki jih uporabljate. Če je nastavitev nastavljena na nič, ima enak rob kot vsebina.
CSS vrednosti padanja
CSS polnjenje lahko sprejme kakršno koli negativno vrednost dolžine. Ne pozabite določiti meritev, na primer px ali em. Določite lahko tudi odstotek za vašo oblazinjenje, ki bo odstotek širine elementa, ki vsebuje blok. To vključuje tudi za zgornje in spodnje blazinjenje. Na primer:
#container {širina: 800px; višina: 200px; } #container p {širina: 400px; višina: 75%; oblazinjenje: 25% 0; }Višina odstavka znotraj elementa #container bo 75% višine #containerja plus 25% širine za zgornjo oblazinjenje in 25% širine za spodnjo oblazinjenje. To znaša 300 + 200 + 200 = 700 pik.
Učinki dodajanja CSS obloge
Na elementih na ravni blokov se obloga nanaša na štiri strani. Ker je element že blok ali polje, se obloga nanaša na stranski okvir.
Če se elementi CSS dodajajo v vrstice, lahko pride do nekaj prekrivanja elementov nad in pod elementom, če navpična obloga presega višino črt, vendar ne bo pomikala višine vrstice navzdol. Horizontalno prilagajanje CSS, uporabljeno za elemente, bo dodano na začetek elementa in na koncu elementa. In oblazinjenje lahko zavije. Vendar se ne bo uporabljal za vse vrstice več linij, zato ne morete uporabiti oblazinjenja, če želite zapreti segment več linijskih vsebnikov.
Tudi v CSS2.1 ne morete ustvariti vsebnikov, kjer je širina odvisna od elementa z odstotki za širino (ali širine polnjenja). Če to storite, je rezultat nedefiniran. Brskalniki bodo še vedno prikazovali vsebino, vendar morda ne boste dobili rezultatov, ki jih pričakujete. Če pomislite na to, je smiselno, kot da bi moral vaš vsebinski element poznati širino njegovih otroških elementov, da bi določil njegovo širino, na primer, če nima vnaprej določene širine in je eden ali več širina, določena kot odstotek elementa vsebnika, to nastavi krožno verigo brez odgovora. Če v svojem dokumentu uporabljate odstotke za širino ničesar, morate zagotoviti, da so tudi matične širine elementov določene tudi.