box-sizing es una propiedad CSS para cambiar el modelo de caja por defecto de los navegadores.

El ancho de un elemento se altera si se le aplica un borde o un padding. Eso es porque la anchura del elemento que tu especificas con CSS, por defecto no incluye borde ni padding.

Un ejemplo: Éste es el efecto que tiene un padding y un borde sobre un elemento de 200px de ancho:

<div style="width:200px;
    padding: 20px;
    border: 10px solid #ccc;
    margin: 0 auto;">
Lorem ipsum...
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…

Como podréis comprobar, no mide 200px de ancho, sino 260px. Es decir:
200px de ancho inicial, más 20px de padding izquierdo, más 20px de padding derecho, más 10px de borde izquierdo, más 10px de borde derecho.

Éste es el modo en el que los navegadores tratan los anchos por defecto. Sería el equivalente a box-sizing: content-box;

box-sizing: border-box

Con border-box, hacemos que el ancho especificado sea el equivalente al ancho total. Es decir:

<div style="width: 200px;
    padding: 20px;
    border: 10px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;">
Lorem ipsum...
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…

Como podréis comprobar, ahora ese elemento exactamente 200px, ni uno más, ni uno menos.

Esto es muy útil para elementos fluídos, cuando necesitas que el elemento ocupe (por ejemplo) un 33% del ancho, y si ocupa un píxel más toda la estructura se iría a tomar por culo estropearía.

box-sizing: padding-box;

Este valor no es tan útil como border-box, pero lo puede ser en ciertos casos. Lo que hace es que la anchura sea la del contenido y el padding (por lo que se le sumará el borde). Es experimental y sólo está implementada en Firefox, por lo que tampoco deberías usarla.

<div style="width:200px;
	padding: 20px;
	border: 10px solid #ccc;
	-webkit-box-sizing: padding-box;
	-moz-box-sizing: padding-box;
	box-sizing: padding-box;
	margin: 0 auto;">
Lorem ipsum...
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…

Ahora podréis ver (si entráis con firefox) que el elemento es 220px de ancho (200 entre contenido y padding y 10 de cada lado de borde).

12 pensamientos en “La propiedad box-sizing

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.