Uso de box-sizing en CSS3

Un gran problema cuando usamos CSS es que hay dos propiedades que no se llevan bien por defecto: padding y width/height. Y es que no podemos usar las dos y obtener el resultado que tenemos, porque cuando a una capa le ponemos un ancho y/o alto fijo y después un espacio interior ese ancho o alto no es el mismo, se modifica por así decirlo.

Por eso también con CSS3 aparece y se fortalece el uso de una regla llamada box-sizing, que nos permite manipular el problema anterior. Por eso en este tutorial vamos a ver cómo usar la propiedad box-sizing en CSS3, para que no tengamos de nuevo el problema de tener un contenedor con el tamaño diferente al real cuando usamos espacios interiores.

Dificultad del tutorial: principiante

Notas

A pesar de que está considerada la propiedad box-sizing como nuevo en CSS3 lo cierto es que esta propiedad ya estaba presente en todos los navegadores(incluyendo IE 8) por lo que realmente la compatibilidad está garantizada. No se necesita tampoco uso de prefijo, por lo que también se ahorra tiempo para escribir.

HTML

Para este pequeño tutorial sólo necesitamos dos capas, el texto es independiente, pero lo uso para identificar qué capa es cuál.

CSS

Para ver las diferencias tenemos que configurar nuestras capas con las mismas características, un fondo de color, texto, fuente y padding o espacio interior.

Lo importante es lo siguiente: a la caja 2 le vamos a aplicar la propiedad box-sizing, la cuál tiene dos valores para implementar:

• content-box: es el estado por defecto, y aunque no se necesita especificar es importante saber que todos los elementos tienen este valor hayamos configurado la propiedad box-sizing o no.
• border-box: este valor nos permite mantener un contenedor tal y como lo queremos configurar sin que salga de su área de especificación. Todo lo que pudiese hacer más grande el contenedor(borde, espacio interior) lo ajusta para que no se agrande esa área y quede intacta.

Es así como usando esta propiedad podemos ver que la caja 2 se queda intacta en cuanto al tamaño, mientas que la caja 1 se ve más grande, porque como le aplicamos un espacio interior de 20px en realidad le añadimos al ancho y alto 40px por el espacio superior, inferior, derecho e izquierdo.