El modelo de cajas
1. Elementos de una caja
Desde el punto de vista de una hoja de estilos, todo elemento html, y los elementos que lo componen son cajas. El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos. Cada elemento genera una caja que actúa como bloque de contención de las cajas generadas subsecuentemente.
Cualquier elemento de una página web está contenido en una "caja" rectangular. Esta caja puede tener:
* un borde visible (que se define mediante la propiedad border)
* un margen transparente exterior al borde (que se define mediante la propiedad margin)
* un relleno transparente entre el borde y el elemento (que se define mediante la propiedad padding)
Dentro de la caja está el contenido en sí del elemento (texto o gráfico). Si nos fijamos en la figura, vemos que la anchura y la altura del elemento no coinciden con la anchura y la altura que luego vemos en pantalla, porque al ancho del elemento hay que añadirle luego el ancho de "relleno" y el ancho del borde que se representan en pantalla. El margen es la separación que hay entre el elemento y los elementos adyacentes (verticales u horizontales).
Este modelo de caja es el que permite, por ejemplo, que cualquier elementos de la página pueda recibir todas de las propiedades definidas en CSS. Por eso, a diferencia de lo que sucede con HTML, todos los elementos pueden tener una imagen de fondo o un borde (sin necesidad de usar una tabla para eso); también es posible darle una ubicación precisa a cualquier elemento dentro de la página, ya sea con respecto a la pantalla o a otros elementos. Mejor aún, nos da la posibilidad de usar un lenguaje como JavaScript para conseguir efectos muy interesantes modificando las propiedades de las cajas (moverlas de su posición, mostrarlas o esconderlas, cambiar su tamaño, etc.).
Las áreas de padding, border y margin se dividen en cuatro segmentos: top (superior), bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir border-left, border-right, border-top y border-bottom (lo mismo para padding y margin).
De acuerdo con las especificaciones de la W3C, cuando asignamos un ancho o un alto a un bloque de CSS, estas medidas se refieren al área del contenido del bloque. Los rellenos, los bordes y los márgenes son un añadido al total del ancho.
El problema consiste en que los Internet Explorer anteriores a la versión 6 utilizan un modelo de caja distinto. En el modelo que utiliza IE hasta la versión 5 incluyen dentro del width tanto el relleno, como los bordes y el margen.
Es decir según la especificación, la caja tiene un tamaño y a ese tamaño hay que añadirle el tamaño del relleno, del borde y del margen. En cambio en Explorer la caja tiene un tamaño y a ese tamaño hay que restarle el tamaño del relleno, del borde y del margen.
En las siguientes secciones veremos cómo especificar los distintos valores de márgenes, bordes y rellenos.