El modelo de cajas

Tarde o temprano, todo sitio queda bajo la influencia del Modelo de Caja. El modelo de caja fue implementado por la especificación 2 de la CSS y es uno de los elementos básicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretación resulta fundamental a la hora de lograr los resultados deseados en un diseño, por más simple que éste resulte.

Cada caja posee, además de su área de contenido, otras tres áreas opcionales:

Área de Margen : Margin

Área de Relleno : Padding

Área de Borde : Border

Box Model o Modelo de Caja.

Las cajas de las páginas en principio no son visibles a simple vista porque no muestran ningún color de fondo ni ningún borde. Como dijimos anteriormente las cajas poseen las siguientes partes:

Se trata del contenido HTML del elemento (el texto de un párrafo, una imagen, el texto de una lista de elementos, etc.)

Es el espacio libre opcional existente entre el contenido y el borde. CSS define cuatro propiedades para definir el relleno:

• padding-top (relleno superior)
• padding-right (relleno derecho)
• padding-bottom (relleno inferior)
• padding-left (relleno izquierda)

Además de estas cuatro propiedades que controlan los rellenos, se puede definir los cuatros rellenos en forma simultánea mediante la propiedad padding donde el primer valor establece el relleno superior, el segundo el relleno derecho, el tercero el inferior y el cuarto el izquierdo.

Línea que encierra completamente el contenido y su relleno. CSS permite modificar el ancho, el color y hasta el estilo que deberán tener los cuatros bordes (superior, derecho, inferior e izquierdo) de nuestra caja, usando las siguientes propiedades.

• border-top-width;
• border-right-width;
• border-bottom-width;
• border-left-width;
• border-top-color;
• border-right-color;
• border-bottom-color;
• border-left-color;
• border-top-style;
• border-right-style;
• border-bottom-style;
• border-left-style;

Además de todas estas propiedades que controlan los márgenes, se puede definir los en forma simultánea mediante la propiedad border. El primer valor es una unidad de medida que define el ancho del borde, el segundo valor el estilo del borde y el tercero el color del borde.