Qual è la differenza tra box-sizing: content-box e border-box?

La differenza tra box-sizing: content-box e box-sizing: border-box risiede nel modo in cui il browser calcola le dimensioni totali dell'elemento:

• content-box (valore predefinito): la larghezza e l'altezza specificano solo il contenuto. A queste dimensioni si aggiungono i margini interni (padding) e i bordi (border), aumentando la dimensione finale dell'elemento.

• border-box: larghezza e altezza includono il contenuto, il padding e il bordo. In altre parole, padding e border "si inseriscono" all'interno delle dimensioni definite.

Esempio:

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

• Con content-box, la larghezza totale sarà: 200 + 102 + 52 = 230px.
• Con border-box, la larghezza totale rimarrà 200px, e il contenuto si ridurrà per accogliere padding e border.

L'uso di border-box è spesso più comodo per il layout, poiché le dimensioni degli elementi non "si gonfiano" a causa di padding e border.