Pojmem „CSS Box model“ se myslí ta část kaskádových stylů, která definuje rozměry zobrazovaných elementů. Určuje jejich vycpávku (padding), orámování (border) a odstup od ostatních (margin). Specifikace i implementace těchto zásadních a často užívaných stylů jsou typickým příkladem chaosu, který na webu panuje.
Vyskytují se totiž dvě různé implementace. Jedna se řídí doporučením W3C, druhá nikoliv. Podle doporučení určuje šířka v CSS šířku obsahu, tzn. vycpávka a okraj se k ní přidávají. Nazvěme tento model „obsahový“. Druhému modelu říkejme „okrajový“, v něm se totiž počítá šířka včetně okraje a vycpávky. Stejná pravidla pochopitelně platí i pro výšku.
Kaskádové styly byly vytvořeny, aby nahradily prezentační části HTML, proto můžeme najít počátky box modelu už v HTML.
<img> o atributy width, height a border. Rozměry určují šířku a výšku grafiky, okraj se přičítá. Jde tedy o model obsahový.
<table> o atributy width a height. Atribut border už existuje déle. Rozměry určují šířku a výšku tabulky včetně okraje. To je model okrajový.
width, height, padding a border dohromady určují model obsahový. (pozn.: vlastnost margin už existovala dříve)
outline. Bez ohledu na to, že jsou v tomto okamžiku box modely prohlížečů jednotné, je opět prosazen obsahový model.
box-sizing, která umožňuje webmasterům nastavit libovolný box model. Zároveň zavádí rozdělení na dva režimy: standardní a zpětně kompatibilní. Ve standardním režimu používá model obsahový, v quirku okrajový.
-moz-box-sizing a režimy. Box model v závislosti na režimu nepřepíná.
box-sizing.
box-sizing.
box-sizing.
Za povšimnutí jistě stojí stav, který nastal v první polovině roku 1998. Světem se tou dobou šířily první prohlížeče s podporou CSS box modelu. Explorer 4.0 měl tržní podíl kolem
Nastal příjemný okamžik, kdy se tvůrci prohlížečů v implementaci shodli. Více než polovina všech návštěvníků užívala prohlížeč podporující okrajový CSS box model. Ostatní neměli box model žádný.
Konsorcium mělo při navrhování doporučení CSS 2 dvě možnosti:
Rozhodlo se pro obsahový model. Vznikla záminka k problémům. Spolupráceschopnost díky tomuto hodně utrpěla.
V následujících letech byla v zájmu majoritního prohlížeče především zpětná kompatibilita. Proto se vůli konsorcia nepodřídil. V zájmu minoritních prohlížečů bylo získat větší podíl na trhu. Jelikož neměly, co ztratit, založili svůj marketing na propagaci W3C doporučení. Vůli konsorcia se tedy podřídily.
Vznikla tak kuriózní situace. Na jedné straně Explorer s okrajovým box modelem. Na straně druhé zbytek světa s obsahovým box modelem.
Sebevědomý Internet Explorer nedbá specifikací a vlastnost width interpretuje jako celkovou viditelnou šířku.
— Jan Bien, Implementační chyby v prohlížečích - chybné rozměry boxů, Interval.cz, 9. ledna 2004
Smutné na tom je, že za tento chaos nese plnou zodpovědnost konsorcium. Majoritní i minoritní prohlížeče se chovaly logicky a předvídatelně. Kdyby se v roce 1998 podařilo Netscapu zvrátit úpadek a stal by se majoritním, byl by nesoulad box modelů stejný. Pouze by si přední představitelé prohodili role.
Webmaster si nyní musí pamatovat, že šířka není šířkou, tedy vlastně je, respektive není, ale taky je. Takto zmatený člověk si pak kupuje malé boty a nikam se nevejdoucí nábytek.
Naštěstí si může práci zjednodušit. Přepne-li Explorery do standardního režimu, dosáhne u téměř všech návštěvníků shodného obsahového modelu. Naopak přepne-li Mozillu CSS vlastností -moz-box-sizing: border-box;, Operu vlastností box-sizing: border-box; a nechá Explorer ve zpětně kompatibilním režimu, dosáhne spolehlivě shodného okrajového modelu.