Čo je vlastnosť box-sizing: border-box a akú úlohu zohráva v CSS?

Vlastnosť box-sizing určuje, ako sa počítava celková šírka a výška prvku.

box-sizing: content-box (štandardná hodnota) — šírka a výška sa vzťahujú iba na obsah (content). Padding a border sa pridávajú k zadaným hodnotám šírky/výšky.

box-sizing: border-box — šírka a výška zahŕňajú padding a border. content sa zmenšuje, aby sa zmestil do zadaných rozmerov.

Úloha box-sizing: border-box v CSS:

• Zjednodušenie výpočtov: Uľahčuje výpočet rozmerov prvkov, najmä pri použití padding a border.
• Predvídateľnosť rozloženia: Umožňuje presne stanoviť veľkosti blokov, nezávisle od padding a border, čím je rozloženie predvídateľnejšie.
• Pohodlie v modeli boxu: Zodpovedá intuitívnemu chápaniu veľkosti bloku — jeho rámom. Uľahčuje tvorbu mriežok a komponentov s pevnou veľkosťou.

Príklad:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Celková šírka = 100 + 10*2 + 1*2 = 122px */
  /* Celková výška = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Celková šírka = 100px */
  /* Celková výška = 100px */
  /* Obsah bude mať šírku a výšku 100 - 10*2 - 1*2 = 78px */
}