box-sizing: border-box

Por defecto, el width y height de CSS se aplican solo al contenido. Cuando añadís padding o border, el elemento crece más allá de esas dimensiones. Esto suele ser contra-intuitivo.

El problema

.caja {
  width: 200px;
  padding: 20px;
  /* ancho real: 200 + 40 = 240px — ¡sorpresa! */
}

La solución

Con box-sizing: border-box, el width incluye padding y border:

.caja {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  /* ancho real: 200px — predecible */
}

La regla global

Prácticamente todos los proyectos modernos aplican esto globalmente:

*, *::before, *::after {
  box-sizing: border-box;
}

Así podés razonar sobre dimensiones sin hacer cálculos mentales.

---

Tu turno: añadí box-sizing: border-box a .box en el sandbox y comprobá.