Co je to box model v CSS?

CSS v modelu box se popisuje, jak se počítá prostor, který zaujímá prvek na webové stránce. Zahrnuje:

• Obsah: Oblast pro skutečný obsah prvku (text, obrázky).
• Padding (vnitřní okraj): Prostor mezi obsahem a okrajem prvku.
• Border (okraj): Okraj obklopující padding a obsah.
• Margin (okraj): Prostor kolem okraje prvku, oddělující ho od ostatních prvků.

Výchozí velikost prvku (v základním modelu box-sizing: content-box) je určena součtem velikostí obsahu, paddingu a borderu. Margin se přidává k celkovému prostoru, ale neovlivňuje velikost samotného prvku.

Vlastnost box-sizing: border-box mění výpočet velikosti prvku tak, že zahrnuje padding a border do celkové šířky a výšky. V tomto případě je velikost prvku určena podle width/height, a padding a border "zabírají" místo uvnitř obsahu.

/* Výchozí model (default) */
.element-content-box {
  width: 100px; /* Velikost obsahu */
  padding: 10px;
  border: 5px solid black;
  /* Celková šířka: 100px (obsah) + 10px (padding vlevo) + 10px (padding vpravo) + 5px (okraj vlevo) + 5px (okraj vpravo) = 130px */
}

/* border-box model */
.element-border-box {
  width: 100px; /* Celková šířka: obsah + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Velikost obsahu: 100px - 10px (padding vlevo) - 10px (padding vpravo) - 5px (okraj vlevo) - 5px (okraj vpravo) = 70px */
}

Porozumění modelu box je klíčové pro přesné umístění a sestavení prvků na stránce.