Cambiar el modelo de caja en CSS

Cuando definimos las dimensiones de algún elemento en CSS, estás medidas sólo afectan al contenido interno de éste, de tal forma que el tamaño final con la que se presentará, es el resultado de la suma del contenido + el relleno interior + el borde. Esto se llama el modelo de caja aditivo y es el modelo estándar.

Entonces, si definimos un div de la siguiente forma:

.box {
    width: 300px;
    padding: 0 20px;
    border: solid 3px blue;
}

tendrá un ancho total de 346pixeles, es decir 300px del contenido + 40px de padding + 6px de border.

Hasta ese punto tiene mucha lógica y no es ningún problema, sin embargo hay ocasiones en las que quisieramos volver a los tiempos de Internet Explorer 6 y que al definir las dimensiones de un elemento, se haga referencia al aspecto final completo, en donde borde y padding se resten del contenido. A esto se le llamaba modelo de caja sustractivo.

A pesar de que este modelo de caja ya no es la opción por defecto en ninguno de los navegadores modernos, podemos activarlo mediante CSS para utilizarlo en ocasiones donde sea necesario.

.box {
    -webkit-box-sizing: border-box; /* Safari/Chrome/WebKit */ 
    -moz-box-sizing: border-box; /* Firefox */ 
    box-sizing: border-box; /* Opera/IE 8+ */
}

Un ejemplo donde esto puede ser útil, para hacer que un input o textarea se ajuste dentro de un layout responsive. Aplicado a un caso real sería algo como lo siguiente:

input {
    width:100%;
    padding: 10px;
    border: 1px solid blue;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Por último, si a un elemento a le aplicaste la propiedad box-sizing: border-box y quieres contrearrestarlo y devolverlo al modelo estándar deberemos utilizar el valor content-box en lugar de border-box.

Más info en CSS Tricks

¿Conocías la propiedad box-sizing?