Jak vlastnost box-sizing ovlivňuje velikost prvku?

Vlastnost CSS box-sizing určuje, jak jsou počítány rozměry prvku — zda zahrnují nebo nezahrnují vnitřní okraje (padding) a rámečky (border).

• Hodnota content-box (výchozí): šířka a výška prvku určují pouze obsah. Vnitřní okraje a rámečky se k těmto rozměrům přičítají, čímž se celková velikost prvku zvětšuje.

• Hodnota border-box: šířka a výška zahrnují obsah, vnitřní okraje a rámečky. To znamená, že pokud nastavíte šířku 100px, obsah se zmenší s ohledem na padding a border tak, aby celková velikost zůstala 100px.

Příklad:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

V tomto případě bude prvek .box mít celkovou šířku 200px, včetně paddingu a borderu. Pokud by to bylo content-box, byla by celková šířka 200 + 210 + 25 = 230px.

Použití border-box často zjednodušuje rozvržení, protože rozměry prvků se "nerozpadají" kvůli paddingu a borderu.