Co je vlastnost box-sizing: border-box a jakou roli hraje v CSS?

Vlastnost box-sizing určuje, jak se počítá celková šířka a výška prvku.

box-sizing: content-box (výchozí hodnota) — šířka a výška se vztahují pouze na obsah (content). Padding a border se přičítají k uvedeným hodnotám šířky/výšky.

box-sizing: border-box — šířka a výška zahrnují padding a border. content se zmenšuje, aby se vešel do uvedených rozměrů.

Role box-sizing: border-box v CSS:

• Zjednodušení výpočtů: Usnadňuje výpočet rozměrů prvků, zejména při použití padding a border.
• Předvídatelnost rozložení: Umožňuje přesně stanovit velikosti bloků, nezávisle na padding a border, což činí rozložení předvídatelnějším.
• Pohodlí v modelu boxu: Odpovídá intuitivnímu chápání velikosti bloku — jeho rámečkům. Usnadňuje tvorbu mřížek a komponent s pevnou velikostí.

Příklad:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Celková šířka = 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á šířka = 100px */
  /* Celková výška = 100px */
  /* Obsah bude mít šířku a výšku 100 - 10*2 - 1*2 = 78px */
}