El modelo de cajas o “box model” es seguramente la característica más importante del lenguaje de hojas de estilosCSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento deCSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiquetaHTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetasHTMLque incluye la página:
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.
Elementos tomados de: http://www.luiscanada.com/manualCSS/css-box-model.php#!prettyPhoto, http://www.librosweb.es/css/capitulo4.html
