Čo je to box model, z čoho pozostáva a aké sú jeho…

Model boxu (CSS Box Model) je abstraktná entita, ktorá popisuje, ako sú prvky HTML zobrazené na stránke vo forme obdĺžnikových blokov. Určuje rozmery a rozloženie obsahu, vnútorných okrajov, hraníc a vonkajších okrajov prvku.

Model boxu sa skladá z nasledujúcich častí:

Content: Obsah prvku (text, obrázky atď.). Jeho veľkosť je určená vlastnosťami width a height.
Padding: Priestor medzi obsahom prvku a jeho hranicou. Určuje sa vlastnosťami padding-top, padding-right, padding-bottom, padding-left alebo skrátenou vlastnosťou padding.
Border: Hranica okolo vnútorného okraja a obsahu. Určuje sa vlastnosťami border-width, border-style, border-color alebo skrátenou vlastnosťou border.
Margin: Priestor medzi hranicou prvku a vonkajšími prvkami. Určuje sa vlastnosťami margin-top, margin-right, margin-bottom, margin-left alebo skrátenou vlastnosťou margin.

Existujú dva hlavné typy box modelu, určené vlastnosťou box-sizing:

content-box (predvolená hodnota): Šírka a výška prvku, určené vlastnosťami width a height, sa vzťahujú iba na oblasť obsahu. Padding a Border sa pridávajú k týmto rozmerom, zväčšujúc celkovú veľkosť prvku.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Pridáva 20px k celkovej veľkosti na každej osi */
  border: 2px solid black; /* Pridáva 4px k celkovej veľkosti na každej osi */
  box-sizing: content-box; /* Predvolené správanie */
}
/* Celková veľkosť prvku bude 124px na 124px */

border-box: Šírka a výška prvku, určené vlastnosťami width a height, zahŕňajú obsah, padding a border. Padding a Border nezväčšujú celkovú veľkosť prvku, ale "zmenšujú" oblasť obsahu.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Zahrnuté do celkovej šírky/výšky */
  border: 2px solid black; /* Zahrnuté do celkovej šírky/výšky */
  box-sizing: border-box;
}
/* Celková veľkosť prvku bude 100px na 100px */

Častejšie sa používa border-box pre predvídateľnejšie správanie veľkostí prvkov pri pridávaní padding a border. To je vhodné, napríklad, pri tvorbe responzívnych rozložení, kde prvky majú zaberajú určitý percentuálny šírku.

Čo je to box model, z čoho pozostáva a aké sú jeho druhy?