Podloga CSS je ena od lastnosti Model škatle CSS. Ta stenografska lastnost nastavi oblazinjenje okoli vseh štirih strani elementa HTML. Podlogo CSS je mogoče uporabiti za skoraj vsako Oznaka HTML (razen nekaterih oznak tabele). Poleg tega imajo lahko vse štiri strani elementa različno vrednost.
Lastnost oblazinjenja CSS
Če želite uporabiti lastnost kratkega oblazinjenja CSS, lahko uporabite mnemoteko "TRouBLe" (ali "TRiBbLe" za vaše oboževalce Star Trek). To pomeni vrh, prav, spodaj, in levoin se nanaša na vrstni red širin oblazinjenja, ki ste ga nastavili v stenografski lastnosti. Na primer:
oblazinjenje: zgoraj desno spodaj levo;
oblazinjenje: 1px 2px 3px 6px;
Če bi uporabili zgoraj naštete vrednosti, bi uporabil drugačno vrednost oblazinjenja na vsaki strani katerega koli elementa HTML, ki ga uporabljaš. Če želite na vse štiri strani uporabiti enako oblazinjenje, lahko poenostavite CSS in samo napišite eno vrednost:
oblazinjenje: 12 slikovnih pik;
S to vrstico CSS bi 12 pik oblazinjenja veljalo za vse 4 strani elementa.
Če želite, da je oblazinjenje enako zgoraj in spodaj ter levo in desno, lahko napišete dve vrednosti:
oblazinjenje: 24px 48px;
Prva vrednost (24 slikovnih pik) bi veljala za zgornji in spodnji del, druga pa za levo in desno stran.
Če napišete tri vrednosti, bodo vodoravna oblazinjenja (leva in desna) enaka, hkrati pa spremenite zgornji in spodnji del:
oblazinjenje: zgoraj desno in levo spodaj;
oblazinjenje: 0px 1px 3px;
Po modelu CSS box je oblazinjenje najbližje elementu / vsebini. To pomeni, da se elementu doda oblazinjenje med širino ali višino vsebine in vsemi vrednostmi obrobe, ki jih uporabljate. Če je oblazinjenje nastavljeno na nič, ima isti rob kot vsebina.
Vrednosti oblazinjenja CSS
Oblazinjenje CSS ima lahko katero koli negativno vrednost dolžine. Navedite meritve, na primer px ali em. Določite lahko tudi odstotek za oblazinjenje, ki bo odstotek širine bloka, ki vsebuje element. To vključuje zgornje in spodnje oblazinjenje. Na primer:
#container {širina: 800px; višina: 200px; }
#container p {širina: 400px; višina: 75%; oblazinjenje: 25% 0; }
The višina odstavka v #container element bo znašal 75% #containerVišina plus 25% širine za zgornjo oblogo in 25% širine za spodnjo oblogo. To znaša 300 + 200 + 200 = 700 slikovnih pik.
Učinki dodajanja oblazinjenja CSS
Vklopljeno elementi na ravni bloka, oblazinjenje se nanese na štiri strani. Ker je element že blok ali polje, se oblazinjenje nanese na stranice polja.
Ko je dodana obloga CSS vstavljeni elementi, lahko pride do prekrivanja elementov nad in pod vstavljenim elementom, če navpično oblazinjenje presega višino črte, vendar ne bo potisnilo višine črte navzdol. Na začetek in konec elementa se doda vodoravno odmikanje CSS, uporabljeno za vstavljene elemente. In oblazinjenje lahko zavije črte. Vendar ne bo veljalo za vse vrstice večvrstičnega elementa, zato ne morete uporabiti oblazinjenja za zamikanje segmenta večvrstične vrstice.
Prav tako v CSS2.1 ne morete ustvariti blokov vsebnikov, kjer je širina odvisna od elementa v odstotkih za širine (ali širine oblazinjenja). Če to storite, je rezultat nedefiniran. Brskalniki bodo še vedno prikazovali vsebino, vendar morda ne boste dobili rezultatov, ki jih pričakujete. Če dobro premislite, je smiselno, kot da bi moral vaš element vsebnika poznati širino svojih podrejenih elementov, da bi lahko določil njegovo širino - na primer če nima vnaprej določene širine in ima ena ali več širino nastavljeno kot odstotek elementa vsebnika, to nastavi krožno verigo brez odgovor. Če uporabljate odstotke za širine česar koli v dokumentu, se prepričajte, da so določene tudi širine nadrejenega elementa.