Co je to box model, z čeho se skládá a jaké jsou jeho…

CSS Box Model (CSS Box Model) je abstraktní entita, která popisuje, jak jsou HTML prvky na stránce reprezentovány ve formě obdélníkových bloků. Určuje velikost a rozložení obsahu, vnitřních okrajů, rámečků a vnějších okrajů prvku.

Model boxu se skládá z následujících částí:

Obsah: Obsah prvku (text, obrázky atd.). Jeho velikost je určena vlastnostmi width a height.
Padding (vnitřní okraj): Prostor mezi obsahem prvku a jeho rámečkem. Je definován vlastnostmi padding-top, padding-right, padding-bottom, padding-left nebo zkrácenou vlastností padding.
Rámeček (Border): Rámeček kolem vnitřního okraje a obsahu. Je definován vlastnostmi border-width, border-style, border-color nebo zkrácenou vlastností border.
Vnější okraj (Margin): Prostor mezi rámečkem prvku a externími prvky. Je definován vlastnostmi margin-top, margin-right, margin-bottom, margin-left nebo zkrácenou vlastností margin.

Existují dva hlavní typy box modelu, určované vlastností box-sizing:

content-box (výchozí hodnota): Šířka a výška prvku, stanovené vlastnostmi width a height, se vztahují pouze na obsahovou oblast. Padding a Border se přičítají k těmto rozměrům, čímž se zvyšuje celková velikost prvku.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Přidá 20px k celkové velikosti na každé ose */
  border: 2px solid black; /* Přidá 4px k celkové velikosti na každé ose */
  box-sizing: content-box; /* Výchozí chování */
}
/* Celková velikost prvku bude 124px na 124px */

border-box: Šířka a výška prvku, stanovené vlastnostmi width a height, zahrnují obsah, padding a border. Padding a Border nezvyšují celkovou velikost prvku, ale "stlačí" obsahovou oblast.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Zahrnuto do celkové šířky/výšky */
  border: 2px solid black; /* Zahrnuto do celkové šířky/výšky */
  box-sizing: border-box;
}
/* Celková velikost prvku bude 100px na 100px */

Častěji se používá border-box, protože umožňuje předvídatelnější chování rozměrů prvků při přidávání padding a border. To je užitečné například při tvorbě responzivních rozvržení, kde prvky mají zabírat určitou procentuální šířku.

Co je to box model, z čeho se skládá a jaké jsou jeho typy?