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 una página web, los elementos de bloque como los párrafos, las listas o los divs se comportan como cajas cuando se muestran. Como veremos a continuación, las cajas tienen un borde, que puede estar visible u oculto, y un margen que hay que tener en cuenta cuando se diseña una página web.

La especificación 2.1 de CSS tiene una sección dedicada al ”box model”, el modelo de caja, que explica el funcionamiento de las cajas que se generan para los elementos que componen una página web. En CSS existen varias propiedades relacionadas con el modelo de caja, pero en este vídeo nos vamos a centrar en las propiedades relacionadas con el tamaño de las cajas.

Una caja tiene cuatro partes: el contenido, el relleno, el borde y el margen. Cada caja tiene un área de contenido, por ejemplo un texto, una lista o una imagen. Alrededor del contenido existen tres partes que son opcionales.

En primer lugar, el padding, que se puede traducir por relleno o acolchamiento. Alrededor se sitúa el borde. Y por último, el margen, que es transparente. Cada una de estas partes se divide en cuatro segmentos: superior (top), derecha (right), inferior (bottom) e izquierda (left).

El box-model define la forma de calcular la anchura y la altura de las cajas. Esto es muy importante, ya que cuando se realiza un diseño hay que conocer las dimensiones de los elementos que componen la página.

En la página sobre el box model del Mozilla Developer Network se encuentra esta imagen que explica que la anchura y la altura de un elemento, las propiedades width y height de CSS, se refieren sólo al contenido y no tienen en cuenta ni el relleno, ni el borde, ni el margen.

Esto también afecta a otras propiedades en las que aparece la anchura y la altura. Pero la anchura y la altura de un elemento a veces ha incluido no sólo el contenido, sino que también ha incluido el relleno y el borde, y eso ha causado mucha confusión.

En concreto, eso ocurría en Internet Explorer 6, que tenía varios modos de funcionamiento: el modo quirk, el modo casi estándar y el modo estándar. Cada modo se activaba según la declaración de DOCTYPE que tuviera el código HTML.

Por ejemplo, si no había DOCTYPE, se activaba el modo quirk, el modo propio de Internet Explorer. En el modo quirk la forma de calcular la anchura y la altura de un elemento era distinta al estándar definido en la recomendación de CSS. Mientras que en el estándar la anchura hace referencia únicamente a la anchura del contenido, en el modo quirk de Internet Explorer la anchura incluía también el relleno y el borde.

Esto fue un grave problema durante muchos años, ya que Internet Explorer 6 fue el navegador más utilizado entre los años 2002 y 2006, como se puede ver en este gráfico que representa la cuota de mercado del navegador Internet Explorer.

Durante esa época, muchos desarrolladores web que no conocían la existencia del modo quirk de Internet Explorer tuvieron muchos momentos de frustración y enfado, ya que tuvieron que crear diferentes CSS para que una página web se viera correctamente en diferentes navegadores.

Afortunadamente esto dejó de ser un problema, ya que la propia Microsoft decidió matar a Internet Explorer 6 hace tiempo y para ello en el año 2011 inició una campaña para que la gente dejase de usarlo.

Por último, vamos a ver un concepto importante del modelo de caja, los márgenes colapsables. Por ejemplo, supongamos que tenemos dos elementos, dos cajas, una con un margen de 10px y otra con un margen de 30px. Podríamos pensar que al situarse una caja debajo de la otra, los márgenes se conservan y por tanto, entre las dos cajas existirá un margen de 40 px.

Sin embargo, el modelo de caja no funciona así. Se tienen que cumplir ciertas condiciones, pero en general siempre ocurre que los márgenes adyacentes se colapsan, se superponen y el margen final es el margen mayor de los dos márgenes adyacentes. Por tanto, la propiedad margin de CSS podemos entender que no define el margen exacto, sino el margen mínimo.

Por ejemplo, en esta página hay tres párrafos, cada uno con un tamaño de margen distinto. Los márgenes están definidos en un CSS. Además, se ha definido un borde para que se vean los límites de cada párrafo. El resultado final es que entre el primer y el segundo párrafo existe una separación de 20px y entre el segundo y el tercero una separación de 30px.

Esto lo podemos comprobar con las herramientas para desarrolladores de Google Chrome. Cuando consultamos las propiedades del primer párrafo, vemos que efectivamente tiene definido un margen de 10px, pero la separación con el segundo párrafo es mayor. El segundo párrafo tiene un margen de 20px, que es justo la distancia que existe entre el primer y segundo párrafo.

Pero la separación del segundo párrafo con el tercer párrafo es mayor. Por último, el tercer párrafo tiene un margen de 30px, que es justo la separación que existe entre el segundo y tercer párrafo.

Ahora te invito a que veas la segunda parte de este vídeo, en el que se explica box-sizing, una nueva propiedad de CSS que permite modificar la forma de calcular la anchura y la altura de una caja.

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.