¿Cuál es la diferencia entre box-sizing: content-box y border-box?

La diferencia entre box-sizing: content-box y box-sizing: border-box radica en cómo el navegador calcula las dimensiones totales del elemento:

• content-box (valor predeterminado): el ancho y la altura especifican solo el contenido. A estos tamaños se añaden los márgenes internos (padding) y los bordes (border), aumentando el tamaño final del elemento.

• border-box: el ancho y la altura incluyen el contenido, los márgenes internos y los bordes. Es decir, el padding y el border "encajan" dentro de las dimensiones establecidas.

Ejemplo:

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

• Con content-box, el ancho total será: 200 + 102 + 52 = 230px.
• Con border-box, el ancho total será 200px, y el contenido se reducirá para acomodar el padding y el border.

Usar border-box suele ser más conveniente para el diseño, ya que las dimensiones de los elementos no "se inflan" debido al padding y al border.