Jaký je rozdíl mezi box-sizing: content-box a border-box?

Rozdíl mezi box-sizing: content-box a box-sizing: border-box spočívá v tom, jak prohlížeč počítá celkové rozměry prvku:

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

• border-box: šířka a výška zahrnují obsah, padding a rámeček. Jinými slovy, padding a border "zapadají" do stanovených rozměrů.

Příklad:

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

• U content-box bude celková šířka: 200 + 102 + 52 = 230px.
• U border-box zůstane celková šířka 200px a obsah se zmenší, aby se vešel padding a border.

Použití border-box je často pohodlnější pro rozvržení, protože rozměry prvků se "nenafukují" kvůli paddingu a borderu.