Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar qué es el modelo de caja.

En la primera parte de este vídeo, vimos el concepto de modelo de caja, que organiza una caja en cuatro partes: el contenido, el relleno, el borde y el margen.

CSS3, la última especificación de CSS, incorpora numerosas novedades que ayudan a controlar mucho mejor el diseño de una página. CSS Basic User Interface Module es una especificación independiente que forma parte de CSS3. En esta especificación se añade una nueva propiedad, box-sizing, que define la forma de calcular el tamaño de una caja en el modelo de caja.

box-sizing puede tomar tres valores: content-box, padding-box y border-box. content-box es el valor por defecto. La anchura y la altura se calculan según la especificación de CSS 2.1. Por tanto, width y height se aplican únicamente al contenido. En padding-box, la anchura y la altura del elemento incluyen el padding. Por último, en border-box, la anchura y la altura del elemento incluyen el padding y el borde.

Si consultamos la documentación de Microsoft, encontramos un par de cosas importantes. En primer lugar, vemos que esta propiedad es de CSS3 y está disponible a partir de Internet Explorer 8. Por otro lado, vemos que esta propiedad sólo puede tomar dos valores, content-box y border-box, pero en la especificación oficial aparece un tercer valor, padding-box. ¿Qué está pasando? Ahora después lo veremos.

Los dos posibles valores que admite Microsoft Internet Explorer son content-box, el valor por defecto, y border-box, que es justo la forma de calcular la anchura que aplicaban las versiones antiguas de Internet Explorer.

Vamos a ver un ejemplo para ver cómo afecta esta propiedad al tamaño de visualización de los elementos. En esta página hay dos div, el primero con el identificador contentBox y el segundo con el identificador borderBox. Las dos cajas tienen las mismas propiedades de CSS excepto la propiedad box-sizing: en la primera caja se emplea content-box y en la segunda border-box. Esto afecta a la forma de interpretar el valor de la anchura de las cajas.

Este es el resultado. La primera caja es más ancha que la segunda caja, ¿por qué? En concreto, la primera caja es 40px más ancha que la segunda. Esto se debe a que en la primera caja, los 200px se refieren sólo al contenido, no incluyen el padding o el borde. En la segunda caja, los 200px incluyen el padding y el borde. Por eso la caja es más pequeña.

En Mozilla Developer Network, el sitio web para desarrolladores de Mozilla, podemos encontrar un aviso muy importante: esta propiedad es experimental, por lo que puede ser que no sea compatible con todos los navegadores y puede ser que su comportamiento cambie en el futuro.

¿Recuerdas que antes vimos que en Internet Explorer la propiedad box-sizing sólo puede tomar dos valores, content-box y border-box? En la tabla de compatibilidad podemos ver a partir de qué versión de navegador esta propiedad se añadió. Y también podemos ver que el valor padding-box por ahora sólo es admitido por Mozilla Firefox.

Por último, otro ejemplo para que veas una importante ventaja que aporta la propiedad box-sizing con el valor border-box. En esta página tenemos dos cajas principales. Cada una de ellas contiene tres cajas, pero lo que quiero lograr es situar las dos primeras cajas en paralelo en una misma fila. Para ello, a cada una de las cajas le asigno un tamaño del 50%. Fíjate que en el primer caso box-sizing toma el valor content-box, y en el segundo caso toma el valor border-box. ¿Qué va a pasar?

Este es el resultado. En el primer caso, las dos cajas no se pueden colocar en paralelo en la misma fila porque no hay espacio suficiente, ya que cada caja tiene realmente una anchura superior al 50%. En el segundo caso sí que es posible, porque la anchura del 50% incluye el contenido, el padding y el borde. Interesante, ¿verdad?

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.