El modelo de caja estándar y el modelo de caja IE

Existen diferencias entre el modelo de caja estándar y el modelo de caja de Internet Explorer.

Conviene conocerlas porque son fuente de muchos quebraderos y de problemas importantes en los diseños: Vamos a verlo con un ejemplo, la explicación está inspirada en un libro de la editorial Anaya Multimedia. El libro se llama CSS y los autores son Andy Budd, Cameron Bull y Simon Collison. Voy a utilizar ese mismo ejemplo para explicarlo, pero os recomiendo que si queréis aprender css entendiendo los conceptos desde el principio lo busquéis. Bien, partamos del siguiente código:

Si implementamos este código CSS y visualizamos el resultado con un Navegador que use el modelo de caja estándar, el resultado será el siguiente:

El parámetro width que hemos definido lo respeta, y afecta al área de contenido. A este valor se le suman los bordes y márgenes y da lugar a un ancho total de 100px; Pero veamos lo que ocurre con el modelo de caja de Internet Explorer: Explorer nos daría el siguiente resultado para el mismo código:

La diferencia la encontramos en el ancho total (pasa a ser 90 px) y en el ancho del área de contenido (pasa a ser de 60px). A diferencia del modelo anterior aquí no respeta el valor del parámetro width. ¿Porqué? Porque considera los 5px de relleno de cada lado como parte del ancho de 70 píxels del área de contenido. Aunque existen diferentes soluciones, para evitar las diferencias de visualización, yo recomendaría (y así lo expone el libro) no añadir nunca relleno a un elemento con un ancho definido. En su lugar hay que añadir relleno o márgenes al padre o al hijo del elemento.