Box model

EJEMPLOS

Anchura
El siguiente ejemplo establece el valor de la anchura del elemento lateral:
#lateral { width: 200px; }
 

...

CSS define otras dos propiedades relacionadas con la anchura de los elementos: min-width y max-width, que se verán más adelante.
Altura
El siguiente ejemplo establece el valor de la altura del elemento de cabecera:
#cabecera { height: 60px; }
 ...










. En el siguiente ejemplo se muestran los estilos CSS de un elemento:
div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}
La anchura total con la que se muestra el elemento no son los 300 píxel indicados en la propiedad width, sino que también se añaden todos sus márgenes,rellenos y bordes:

Figura 4.15 La anchura total de un elemento tiene en cuenta los márgenes, rellenos y bordes
De esta forma, la anchura del elemento en pantalla sería igual a la suma de la anchura original, los márgenes, los bordes y los rellenos:
30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel
Así, la anchura/altura establecida con CSS siempre hace referencia a la anchura/alturadel contenido. La anchura/altura total del elemento debe tener en cuenta además los valores del resto de partes que componen la caja del box model.
Por otra parte, la guerra de navegadores que se produjo en los años 90 provocó que cada fabricante (Microsoft y Netscape) añadiera sus propias extensiones y mejoras en sus productos. Posteriormente, aparecieron los estándares publicados por el W3C ylos fabricantes se encontraron con el problema de la incompatibilidad entre sus implementaciones anteriores de HTML y CSS y las implementaciones que requerían los estándares.
La solución que adoptaron fue la de incluir en el navegador dos modos diferentes de funcionamiento: modo compatible con las páginas antiguas (denominado "modo quirks" y que se podría traducir como "modo raro") y modocompatible con los nuevos estándares (denominado "modo estándar"). El modo quirks es equivalente a la forma en la que se visualizaban las páginas en los navegadores Internet Explorer 4 y Netscape Navigator 4.
La diferencia más notable entre los dos modos es el tratamiento del "box model", lo que puede afectar gravemente al diseño de las páginas HTML. Los navegadores seleccionan automáticamente el modo enel que muestran las páginas en función del DOCTYPE definido por el documento. En general, los siguientes tipos de DOCTYPE activan el modo quirks en los navegadores:
No utilizar ningún DOCTYPE
DOCTYPE anterior a HTML 4.0 ()
DOCTYPE de HTML 4.01 sin URL ()
En el caso concreto de Internet Explorer, también activan el modo quirks los modos XHTML 1.0 que incluyen la declaración de XML (por ejemplo) al principio de la página web:


Se pueden consultar todos los casos concretos que activan el modo quirks para cada navegador en la página http://hsivonen.iki.fi/doctype/
La versión 5.5 y anteriores de Internet Explorer y las versiones 6 y 7 en modo quirks siguen su propio modelo de cálculo de anchuras y alturas que es muy diferente al método definido por el estándar.
La siguiente imagenmuestra el elemento del ejemplo anterior en la versión 6 de Internet Explorer en modo estándar:

Figura 4.16 Internet Explorer 6 en modo estándar
La anchura del elemento es la que se obtiene de sumar la anchura de su contenido (300), sus bordes (2 x 10) y sus rellenos (2 x 50). Por lo tanto, la anchura del elemento son 420 píxel, a los que se suman los 30 píxel de margen lateral a cada lado.Sin embargo, el mismo ejemplo en el modo quirks de la versión 6 de Internet Explorer muestra el siguiente aspecto:

Figura 4.17 Internet Explorer 6 en modo quirks
Las versiones anteriores de Internet Explorer y las versiones 6 y 7 en modo quirks consideran que la anchura establecida por CSS no sólo es la anchura del contenido, sino que también incluye los bordes y el relleno.
Por lo tanto, en...