Ir directamente al contenido de esta página
Siguiendo la especificación del W3C para el modelo de caja, el ancho y alto asignados a un elemento corresponde a la caja contextual de su contenido, o el espacio «natural» que ocupa éste. Al tamaño de esa caja se añade el espacio que se designe al relleno (padding) —o distancia que separa éste de su borde (border)—. Al total, por último, se suma el tamaño del margen (margin), si es que éste se ha asignado. El margen se extiende desde la arista exterior del borde.
Como se ve, el modelo de caja del W3C es aditivo, es decir, los sucesivos valores de las propiedades «rodean» la caja generada hasta ese momento, aumentando el espacio designado para el elemento. Sin embargo, el modelo tradicional de Internet Explorer ha sido sustractivo: el espacio asignado a un elemento es el total resultante de sumar contenido, relleno y borde, es decir, que estas dos últimas propiedades reducen el espacio final asignado al contenido.
Si aplicamos el estilo siguiente a un párrafo:
p{
width:200px;
height:50px
padding:10px;
border:10px;
margin:10px;
}
Siguiendo la especificación del W3C, el área asignada al contenido es de 200 por 50 píxeles; a ésta se suma por cada lado 10 píxeles del relleno, 10 del borde y 10 del margen. El espacio asignado al elemento es, por tanto, de 260 por 110 píxeles.
En Internet Explorer, a los 200 píxeles iniciales se les añade los 10 del margen por cada lado, pero se les resta primero el espacio que ocupa el borde, y después el espacio que ocupa el relleno. El área total del elemento resultante es de 220 por 70 píxeles, dentro de la cual el espacio del contenido se ve reducido a 160 por 10 píxeles.
En la ilustración de abajo, la línea roja señala el espacio inicial asignado al párrafo del ejemplo:
A la hora de llevar a acabo el diseño de una página, esta diferencia es crítica para su composición1.
Afortunadamente, a partir de Explorer 6 al declarar una DTD pública el modelo que se aplica es el estándar. Si alguien desea comprobarlo, recomiendo que emplee Explorer 6 para ver este ejemplo en modo quirks, y este otro con la DTD XHTML 1.0 Strict.
Pero como nada es perfecto, aún hay un pequeño problema, y es crear un código XHTML 1.1. Mientras que en XHTML 1.0 la declaración inicial de XML —<?xml version="1.0" encoding="utf-8"?>— del prólogo del documento es opcional, en 1.1 es obligatoria. En Explorer 7 esto no supone ninguna diferencia, pero en el 6 dispara el modo quirks, por mucho que inmediatamente después se declare una DTD, como se puede comprobar en este tercer ejemplo.
Nos podríamos conformar con la DTD 1.0 estricta, pero si no queremos hay dos posibles soluciones:
Si aplicamos la segunda solución a ejemplo anterior, corregimos el error.
Esta solución no es un hack de CSS, puesto que no explota un error de interpretación de un navegador concreto, sino que ofrece una alternativa para navegadores antiguos que ni soportan selectores avanzados ni el modelo estándar de caja. Es una metodología en perfecta consonancia con la teoría del la mejora progresiva (progressive enhancement).
Por último, a pesar de que el modelo de Explorer no es el correcto, muchos desarrolladores lo consideran más intuitivo. La discusión sobre si esto es así o no puede llenar páginas y páginas, pero como decisión salomónica por parte del W3C parece ser que en CSS 3 se podrá elegir el modelo de caja a través de la propiedad box-sizing. Esta propiedad contará con los valores content-box para aplicar el modelo de la especificación 2.1, y border-box para emplear el modelo de Explorer.
