CSS box model

Овај чланак је започет или проширен кроз пројекат семинарских радова. Потребно је проверити превод, правопис и вики-синтаксу.
Када завршите са провером, допишете да након |проверено=.

У веб дизајну, CSS box model односи се на композицију веб странице или HTML документа од блокова или кутија коришћењем CSS-a. Конкретно, модел кутије описује како је величина сваког таквог блока и његов садржај одређена стилским инструкцијама. Смернице и правила везана за модел кутије описани су од стране World Wide Web Конзорцијума (W3C).

Box model (модел кутије)

Садржај сваке кутије одређен је са 4 параметра:

height/width (срп. висина/ширина) дефинишу димензије "стварног" садржаја кутије (текст, слике, табеле, ...)
padding (срп. растојање/удаљеност) дефинише интерну удаљеност између садржаја елемента и његових ивица
border (срп. граница) представља оквир за изабрани елемент. Користи подешавања за величину, стил линије и боју.
margin (срп. маргина) је размак између елемената. То је простор између ивице елемената коју ниједан други елемент не сме додиривати или прелазити преко њега.

Height/Width

Висина и ширина односе се на сам садржај кутије. Дефинишу се у пикселима (px).

Padding

Да бисте подесили удаљеност од ивица, потребно је да се износи горњег, доњег, левог и десног растојања одвојено програмирају у виду издвојених декларација:

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

или у поједниначној декларацији:

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

Border

Додавање ивица оквира је једноставно и нуди поделе између делова веб странице које су уочљиве и лаке за препознавање. Ивице оквира могу да се дефинишу на глобалном нивоу, или да се свака дефинише појединачно. Комбинација је, јасно, безброј.

Нека CSS својства:

border-width подешава дебљину ивичне линије оквира у пикселима. Могуће је и дефиницати сваку од ивица посебно и то border-top-width (горњу) , border-right-width (десну), border-left-width (леву), border-bottom-width (доњу).
border-color подешава боју ивице. Јасно, свакој од ивица се може приступити на аналогни начин као код својства width.
border-style дефинише стил линије која ће оивичавати кутију. Постоје разне могућности као нпр.: dotted (истачкана), solid (неиспрекидана), dashed (испрекидана)...
border-radius подешава полупречник заобљења око ивице угла изабраног елемента у пикселима.

Такође, постоји могућност да уместо линије, оквир кутије буде слика.

Margin

Маргине, као и растојање и многа друга својства CSS-а могу да се подесе одвојено или заједно у једној декларацију. Подешавају се у пикселима или се претраживачу оставља да сам одреди маргине опцијом auto.

На тај начин, укупна ширина садржаја кутије је ширина садржаја плус (left- и right-) padding (срп. растојање) плус (left- и right-) border (срп. ивица) плус (left- и right-) margin (срп. маргина). Слично, укупна висина кутије једнака је висини садржаја плус (top- и bottom-) padding плус (top- и bottom-) border плус (top- и bottom-) margin.

Пример кода

На пример, дати CSS код:

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

ће дефинисати модел кутије где ће сви елементи (блокови) наведени унутар њега бити смештени у оквиру 'Класа'. Наиме, ова кутија има укупну висину 160px и ширину 260px што представља суму садржаја, маргина, граница и одстојања.

Bugs (срп. Багови)

Док W3C препоруке дефинишу модел кутије на прецизан и недвосмислен начин, неке старије верзије прегледача нису у могућности. Из тог разлога могуће је да неће приказати димензије кутије са веб стране исправно. Најуочљивије грешке код исправног приказивања модела кутије јављају се код старијих верзија Internet Explorerа, и познати су као Internet Explorer box model bug.

Референце

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