CSS box model

U veb dizajnu, CSS box model odnosi se na kompoziciju veb stranice ili HTML dokumenta od blokova ili kutija korišćenjem CSS-a. Konkretno, model kutije opisuje kako je veličina svakog takvog bloka i njegov sadržaj određena stilskim instrukcijama. Smernice i pravila vezana za model kutije opisani su od strane World Wide Web Konzorcijuma (W3C).

Model kutije sa svim svojstvima

Box model (model kutije)

Sadržaj svake kutije određen je sa 4 parametra:

• height/width (srp. visina/širina) definišu dimenzije "stvarnog" sadržaja kutije (tekst, slike, tabele, ...)
• padding (srp. rastojanje/udaljenost) definiše internu udaljenost između sadržaja elementa i njegovih ivica
• border (srp. granica) predstavlja okvir za izabrani element. Koristi podešavanja za veličinu, stil linije i boju.
• margin (srp. margina) je razmak između elemenata. To je prostor između ivice elemenata koju nijedan drugi element ne sme dodirivati ili prelaziti preko njega.

Height/Width

Visina i širina odnose se na sam sadržaj kutije. Definišu se u pikselima (px).

Padding

Da biste podesili udaljenost od ivica, potrebno je da se iznosi gornjeg, donjeg, levog i desnog rastojanja odvojeno programiraju u vidu izdvojenih deklaracija:

p{
padding-top: 2px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 4px;
}

ili u pojedninačnoj deklaraciji:

p{
padding: 2px 3px 4px 5px;
}

Border

Dodavanje ivica okvira je jednostavno i nudi podele između delova veb stranice koje su uočljive i lake za prepoznavanje. Ivice okvira mogu da se definišu na globalnom nivou, ili da se svaka definiše pojedinačno. Kombinacija je, jasno, bezbroj.

Neka CSS svojstva:

• border-width podešava debljinu ivične linije okvira u pikselima. Moguće je i definicati svaku od ivica posebno i to border-top-width (gornju) , border-right-width (desnu), border-left-width (levu), border-bottom-width (donju).
• border-color podešava boju ivice. Jasno, svakoj od ivica se može pristupiti na analogni način kao kod svojstva width.
• border-style definiše stil linije koja će oivičavati kutiju. Postoje razne mogućnosti kao npr.: dotted (istačkana), solid (neisprekidana), dashed (isprekidana)...
• border-radius podešava poluprečnik zaobljenja oko ivice ugla izabranog elementa u pikselima.

Takođe, postoji mogućnost da umesto linije, okvir kutije bude slika.

Margin

Margine, kao i rastojanje i mnoga druga svojstva CSS-a mogu da se podese odvojeno ili zajedno u jednoj deklaraciju. Podešavaju se u pikselima ili se pretraživaču ostavlja da sam odredi margine opcijom auto.

Na taj način, ukupna širina sadržaja kutije je širina sadržaja plus (left- i right-) padding (srp. rastojanje) plus (left- i right-) border (srp. ivica) plus (left- i right-) margin (srp. margina). Slično, ukupna visina kutije jednaka je visini sadržaja plus (top- i bottom-) padding plus (top- i bottom-) border plus (top- i bottom-) margin.

Primer koda

Razlika u interpretaciji širine box modela (modela kutije) W3C i Internet Explorer-a

Na primer, dati CSS kod:

Klasa {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: solid 10px black;
  margin: 10px;
}

će definisati model kutije gde će svi elementi (blokovi) navedeni unutar njega biti smešteni u okviru 'Klasa'. Naime, ova kutija ima ukupnu visinu 160px i širinu 260px što predstavlja sumu sadržaja, margina, granica i odstojanja.

Bugs (srp. Bagovi)

Glavni članak: Internet Explorer box model bug

Dok W3C preporuke definišu model kutije na precizan i nedvosmislen način, neke starije verzije pregledača nisu u mogućnosti. Iz tog razloga moguće je da neće prikazati dimenzije kutije sa veb strane ispravno. Najuočljivije greške kod ispravnog prikazivanja modela kutije javljaju se kod starijih verzija Internet Explorera, i poznati su kao Internet Explorer box model bug.

Reference

• The world wide web consortium (W3C) specification of the box model
• A tutorial on the CSS box model
• HTML i CSS3 - Josh Hill James, A. Brannen