Co je to box model v CSS?

CSS box model popisuje, jak jsou prvky zobrazeny na stránce jako obdélníkové bloky. Skládá se ze čtyř zón nebo vrstev, které se překrývají, počínaje obsahem:

1. Obsah: Oblast, kde se nachází skutečný obsah prvku (text, obrázky atd.). Jeho velikost je určena vlastnostmi width a height.

2. Padding (vnitřní okraj): Průhledná oblast mezi obsahem a okrajem prvku. Nastavuje se vlastnostmi padding-top, padding-right, padding-bottom, padding-left nebo zkrácenou vlastností padding.

3. Rám (Border): Čára obklopující padding a obsah. Jeho styl, tloušťka a barva jsou určeny vlastnostmi border-width, border-style, border-color nebo zkrácenými zápisy jako border.

4. Okraj (Margin): Průhledná oblast kolem okraje prvku, která jej odděluje od ostatních prvků. Nastavuje se vlastnostmi margin-top, margin-right, margin-bottom, margin-left nebo zkrácenou vlastností margin. Margins sousedních bloků se mohou slévat.

Výchozí chování, popsané vlastností box-sizing: content-box (výchozí), určuje, že vlastnosti width a height se vztahují pouze na obsah (Content). Padding a border se k této velikosti přičítají, čímž zvětšují celkovou velikost prvku.

Použitím box-sizing: border-box zahrnují vlastnosti width a height obsah, padding a border. Margin se vždy přičítá k celkové velikosti prvku, bez ohledu na box-sizing.

Příklad:

div {
  width: 100px; /* Šířka obsahu (pro content-box) nebo celého prvku (pro border-box) */
  height: 50px; /* Výška obsahu (pro content-box) nebo celého prvku (pro border-box) */
  padding: 10px; /* Vnitřní okraj */
  border: 2px solid black; /* Rámec */
  margin: 15px; /* Vnější okraj */
}

V závislosti na hodnotě box-sizing budou skutečné rozměry prvku odlišné.

• box-sizing: content-box: Skutečná šířka = 100px (obsah) + 10px (padding vlevo) + 10px (padding vpravo) + 2px (border vlevo) + 2px (border vpravo) = 124px. Skutečná výška = 50px (obsah) + 10px (padding shora) + 10px (padding zdola) + 2px (border shora) + 2px (border zdola) = 74px.
• box-sizing: border-box: Skutečná šířka = 100px (obsah + padding + border). Skutečná výška = 50px (obsah + padding + border).

Vnější okraj margin: 15px se přičítá kolem této celkové velikosti.