Čo je to box model v CSS?

CSS-ový model boxu popisuje, ako sa počíta priestor, ktorý zaberá prvok na webovej stránke. Zahŕňa:

• Obsah: Oblasť pre skutočný obsah prvku (text, obrázky).
• Padding (vnútorné okraje): Priestor medzi obsahom a okrajom prvku.
• Border (okraj): Okraj obklopujúci padding a obsah.
• Margin (okraj): Priestor okolo okraja prvku, ktorý ho oddeľuje od iných prvkov.

Predvolená veľkosť prvku (v štandardnom modeli box-sizing: content-box) je určená súčtom veľkostí obsahu, paddingu a borderu. Margin sa pridáva k celkovému priestoru, ale neovplyvňuje veľkosť samotného prvku.

Vlastnosť box-sizing: border-box mení výpočet veľkosti prvku tak, že zahrňuje padding a border do celkovej šírky a výšky. V tomto prípade je veľkosť prvku určená pomocou width/height, a padding a border "zabírajú" miesto vo vnútri obsahu.

/* Štandardný model (predvolený) */
.element-content-box {
  width: 100px; /* Veľkosť obsahu */
  padding: 10px;
  border: 5px solid black;
  /* Celková šírka: 100px (obsah) + 10px (padding vľavo) + 10px (padding vpravo) + 5px (okraj vľavo) + 5px (okraj vpravo) = 130px */
}

/* border-box model */
.element-border-box {
  width: 100px; /* Celková šírka: obsah + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Veľkosť obsahu: 100px - 10px (padding vľavo) - 10px (padding vpravo) - 5px (okraj vľavo) - 5px (okraj vpravo) = 70px */
}

Pochopenie modelu box je kľúčové pre presné umiestnenie a skladanie prvkov na stránke.