El modelo de caja

Cuatro capas

El navegador trata cada elemento como una caja rectangular, hecha de cuatro capas, de adentro hacia afuera:

• Content (contenido): el texto, imagen, o lo que sea que tenga adentro.
• Padding (relleno): espacio entre el contenido y el borde. Empuja el borde hacia afuera, sin mover nada de lo que está fuera de la caja.
• Border (borde): una línea alrededor del padding y el contenido.
• Margin (margen): espacio fuera del borde, que separa esta caja de las demás.

.caja {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

box-sizing: border-box

Ese cálculo de la pantalla anterior sorprende a cualquiera al principio — uno esperaría que width: 100px signifique "esta caja mide 100px", punto. La propiedad box-sizing permite justamente eso.

content-box (el valor por defecto)

width mide solo el contenido. Padding y borde se suman aparte — es el comportamiento que viste en la pregunta anterior.

border-box

width incluye contenido, padding y borde. Si decís width: 100px, la caja mide 100px de ancho total, sin importar cuánto padding o borde le agregues.

.caja {
    box-sizing: border-box;
    width: 100px;
    padding: 20px;
    border: 5px solid black;
}
/* Ancho total: 100px, siempre */

Por lo predecible que resulta, es muy común ver box-sizing: border-box aplicado a todos los elementos de una página de una sola vez, con el selector universal:

* {
    box-sizing: border-box;
}