Box model - Matrjoška

Každý prohlížeč interpretuje šiřku boxu s ramcem jinak. Přesněji řečeno všechny logicky, IE nelogicky. Pokud si vememe šířku prvku třeba 100px, je to šířka bez borderu a marginu. Po zadání borderu 5px a marginu 10px, celková šířka bloku by měla být 115px.

100 + 5 + 10 = 115px

Jak to počítá Internet Explorer?

V IE je to obráceně. Po zadání výšky a šírky boxu je to celková výška a šířka a border a margin "lezou" dovnitř. Tedy pokud je šířka 100px, border 5px a margin 10px, bude šířka zase 100px. Ale pozor! Obsah se nám zmenší.

100 - 10 - 5 = 85px

Toto se řeší pomocí dvou bloků vnořených do sebe. Jednomu řekneme šířku a vyšku přesně tak jak chceme, a druhý využíváme na obsah, margin a border.

.ramecek{ width: 100px; height: 100px}
.obsah{ margin: 10px; border: 5px solid green}

A samotné HTML by vypadalo nějak takto:

<div class="ramecek">
 <div class="obsah">
  obsah
 </div>
</div>