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.

Пример кода

[уреди | уреди извор]
Разлика у интерпретацији ширине box modela (модела кутије) W3C и Internet Explorer-a

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

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

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

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

[уреди | уреди извор]
Главни чланак: Internet Explorer box model bug

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

Референце

[уреди | уреди извор]