Co je to box model v CSS?

V CSS popisuje model boxu obdélníkovou oblast, která je generována pro každý prvek a slouží k výpočtu jeho rozměrů a polohy. Skládá se ze čtyř částí:

• Box obsahu: Oblast, kde je zobrazen obsah prvku (text, obrázky atd.). Jeho velikost je určena vlastnostmi width a height.
• Padding box: Prostor mezi okrajem obsahu a okrajem prvku. Velikost je určena vlastností padding. Barva pozadí a obrázek prvku se rozšiřují na tuto oblast.
• Border box: Okraj prvku obklopující padding box. Velikost je určena vlastnostmi border.
• Margin box: Prostor kolem okraje prvku, oddělující ho od ostatních prvků. Velikost je určena vlastností margin. Tato oblast je vždy zcela průhledná.

Výchozí velikost prvku se počítá následovně:

šířka = width + padding-left + padding-right + border-left-width + border-right-width
výška = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Vlastnost box-sizing umožňuje tento model změnit:

• content-box (výchozí): Rozměry width a height se vztahují pouze na obsahový box.
• border-box: Rozměry width a height zahrnují padding a border.

.element-default {
  width: 100px; /* Šířka obsahového boxu = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Skutečná šířka prvku: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Skutečná šířka prvku = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Šířka obsahového boxu: 100 - 10 - 10 - 5 - 5 = 70px */
}