CSS: El box model (o modelo de caja)

El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web.

El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulares.

CSS permite controlar el aspecto de todas las cajas. El diseño de cualquier página XHTML está compuesto por cajas rectangulares.

CSS permite definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada una de ellas. Además, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento.

En realidad, todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos indicado para maquetar la página:

Cada una de las cajas está formada por seis partes, tal y como se muestra en la siguiente imagen tridimensional:

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

1.- Contenido (content): contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.).

2.- Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.

3.- Borde (border): línea que encierra completamente el contenido y su relleno.

4.- Imagen de fondo (background-image): imagen que se muestra por detrás del contenido y el espacio de relleno.

5.- Color de fondo (background-color): color que se muestra por detrás del contenido y el espacio de relleno.

6.- Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

 


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO