Box sizing

Sin boxizing

Boxizing elimina el problema de aumento de tamaño de los elementos al añadirles un padding o una linea. Por ejemplo, si tenemos un div de 100px de ancho y le añadimos un padding de 10px y una linea de 1 px a su alrededor entonces resulta que el div acaba midiendo 122px.

div{ width:100px; padding:10px; border: #000 1px solid; }

Obviamente a la hora de encajar cuantro de estos divs en un contenedor de 400px tienes que acabar haciendo matemáticas para conseguirlo. 400px menos los 80 pixeles del pading de las cuatro cajas (10px por lado) dan 320px menos los 8px (2 por caja) de la linea dan 312px.

400px – 80px = 320px – 8px = 312px

Una solución para el tema del padding seria asignarlo a los elementos que hay dentro del div opción válida si no son demasiados los elementos que contiene, pero no existe solición si añadimos un border al div.

p{padding:10px;}

Con boxsizing

Asignar el 25% de tamaño a cada caja.

div{ 
    width: 25%; 
    padding: 10px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
} 

Soporte

A partir de Opera 8.5, Firefox 1-3, Safari 3, IE8.

Los prefijos solo son necesarios para soportar versiones antiguas de navegadores antiguos basados en webkit y mozilla (Safari, Chrome, Firefox).

Demo en codepen