Box-modell

Jag har sett benämningen box-modell ett antal gånger, men aldrig fattat vad det betyder.

Någon som skulle kunna förklara lite enkelt vad det är?

Inlägget har redigerats av respekt till frågeställaren.

Handlar det om CSS så är det säkert den här som avses. http://www.w3.org/TR/REC-CSS2/box.html

Det finns ett berömt hack till denna så att det ska se likadant ut i de flesta webbläsare. http://tantek.com/CSS/Examples/boxmodelhack.html

Helt enkelt "lådor" med innehåll ;) (<div>, <p> osv..)
Det kan dock bli besvärligt att få det att se lika ut i förskelliga webläsare pga tolkning av "box-model"

... och det är, som Gislaved.net och frankof antyder, tyvärr inte så enkelt som man först kan tro, eftersom t.ex. gamla kära MSIE5 och dess föregångare traditionellt har tolkat hur en box byggs upp ganska rejält annorlunda mot det som nu är standard, och att t.ex. MSIE6 har olika box-modeller inbyggda som den byter mellan beroende på <!DOCTYPE (s.k. "standard mode" och "Quirks mode").

Mozilla m.fl har också olika moder (där deras respektive "quirks mode" försöker imitera MSIE5:s boxmodell - men tyvärr så skiljer sig beteendena för Box-modellen i framförallt Quirks mode lite åt även mellan webbläsarna... Och det är välkänt att det finns buggar i MSIE6:s "standards mode" som fått Mozilla-gänget att även köra med en "almost standards mode" för vissa dokumenttyper för att skillnaderna mot MSIE6 skall bli så få som möjligt...

I MSIE har man traditionellt räknat så att bredden på ett block även innefattar dess border och dess padding så att ett blocks yttersta mått horisonellt blir margin-left + margin-right + width.

Enligt CSS2Standard skall blockets yttersta mått vara margin-left + margin-right + border-left + border-right + paddding-left + padding-right +width...

Detta får följden att man i CSS ofta måste "hacka om" värden lite för MSIE om man både vill ha en gemensam CSS-fil för sin sida, och dessutom väljer att köra i "Quirks mode" genom att t.ex. utelämna <!DOCTYPE...

Box-modell-problematiken anses idag av *många* vara ett av de värsta gissel man får dras med i webbdesignkretsar och den är också en av de vanligare orsakerna att folk får problem med sina CSS-layouter... (vilket bl.a. kan ses här på wF i alla "men varför blir det olika i MSIE och Mozilla för"-trådar)

Sök lite på *quirks* här i forumet för mer info och länkar ;)