Box-sizing: el secreto para diseños simples

Box-sizing es una propiedad CSS que hace que los diseños CSS trabajen intuitivamente. Si usted ha estado trabajando con CSS por cualquier periodo de tiempo, sabes que puede ser confuso utilizar caracteristicas como width, padding y border. Aveces cuando se utiliza la propiedad width, no siempre aplica de la manera en la que usted podria esperar, sin embargo con la propiedad box-sizing, un ancho de 200px realmente significa un ancho de 200px renderizado. Que no implica ninguna magia de Javascript, y funciona incluso a traves de navegadores en IE8. Profundicemos.

El modelo de caja

La anchura (width) y altura (height) de cualquier elemento de una pagina web se rige por el modelo de caja CSS. Los matices del modelo de caja pueden ser algo complejos, pero la parte mas importante de entender es como se calculan la altura y anchura prestadas. Una combinacion de varias propiedades CSS forma la anchura (width) real representada y la altura de la pagina.

padding + border + width = anchura real procesada
padding + border + height = altura real procesada

Eso es un poco confuso, asi que aqui hay una ilustracion que les puede ayudar.

Sin box-sizing, la propiedad width representa el area de contenido del elemento. El tamaño real prestado representa el width, padding y border.

Esto significa que si establece un ancho de algo parecido a 200px o un ancho relativo del 25% el elemento solo sera de ese tamaño exacto si no tiene padding o border. Si tiene padding o border (o ambos), el tamaño real prestado sera mayor. Dicho de otro modo, la propiedad width significa simplemente la anchura del area de contenido y no la anchura total del elemento.

Como resultado, calcular un ancho (width) deseado en la pagina implica restar el padding y border de la propiedad width. Por ejemplo, si establece un width de 200px y luego desea 20px de padding a cada lado, tienes que pedir prestado 40px (20px y 20px para derecha e izquierda) del width. Lo mismo es valido para la propiedad border. Esto hace el codigo mucho menos legible, por que el elemento procesado aun es de 200px, podria tener codigo que se lee como esto:

.sidebar{
    width: 158px;
    padding: 20px;
    border:1px solid #DDD;
}

No es muy intuitivo par la propiedad width a decir 158px si el ancho real prestado es 200px. Afortunadamente, hay un mejor metodo que logra el mismo resultado.

* {box-sizing: border-box;}

En lugar de calcular el ancho (width) incluyendo el padding y border, la propiedad box-sizing en combinacion con el valor border-box utiliza la propiedad width como el ancho real prestado. El codigo anterior podria modificarse para ver algo como esto:

.sidebar{
    box-sizing:border-box;
    width: 200px;
    padding:20px;
    border:1px solid #DDD;
}

Cualquier padding o border que se aplique no se agregará a la anchura procesada. Por el contrario, se restaran automaticamente desde el espacio de contenido (content). Esto resulta en un codigo mucha mas legible. Aqui esta una imagen que ayuda a ilustrar como box-sizing:border-box calcula el ancho.

Con box-sizing habilitado, la propiedad width es la real representada del ancho del elemento. El area del contenido es automaticamente establecido con el tamaño del ancho restante, despues de haber restado el padding y el border.

De hecho, muchos reputados diseñadores y desarrolladores web han defendido utilizando box-sizing:border-box; a traves de todos los elementos de la pagina para un enfoque mas natural e intuitivo de diseño, Paul Irish recomienda usar el siguiente codigo:

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

La propiedad box-sizing no es nada nuevo, pero solo en los ultimos años a sido una tecnica viable gracias al apoyo del navegador internet explorer (y version anterior de ie fuera de uso). Este codigo funciona en ie8, que es bastante perdonador considerando que la version ie11 es la version mas reciente. Para obtener mas informacion sobre compatibilidad de tu navegador, compruebe las tablas de soporte de caniuse.com para border-box.

Recursos box-sizing

Como si box-sizing no fuese lo suficientemente grande, podria estar encantado de encontrar que ya esta dentro de front-end frameworks como bootstrap. Por defecto estos frameworks aplican convenientemente box-sizing a todo, esto hace mas facil de entender sus sistemas de grillas (grid systems).

Traducido por arthusu desde treehouse blog