200px|оквир|десно|Модел кутије са свим својствима У веб дизајну, 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. Пример кода thumb|300px| Разлика у интерпретацији ширине box modela (модела кутије) W3C и Internet Explorer-a На пример, дати 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
Категорија:Web development Категорија:CSS фрејмворк Категорија:Веб развој