Modelo de Caja Tradicional

Las etiquetas HTML  con las que se construye el contenido de un sitio web son interpretadas como un contenedor, caja o rectángulo. Cada vez que agregamos una etiqueta a un documento HTML se crea uno de estos contenedores. Este modelo es el que CSS utiliza para afectar la apariencia del contenido de una web.

Lo que haremos a continuación será aprender cómo CSS utiliza estos rectángulos para controlar el diseño de un sitio web. Para ello es necesario comprender cuales son las partes de una caja y cuál es su papel en la visualización del contenido web.

1. Content (Contenido). Contenido HTML. Sabemos que puede ser texto, imágenes, videos e incluso otras etiquetas con otro contenido.
2. Padding (Relleno). Es el espacio que existe entre el contenido y los bordes de la caja o contenedor.
3. Border (Borde). Es la línea que marca el rectángulo que encierra el contenido.
4. Background image (imagen de fondo). Por defecto es invisible puesto que requiere de una definición específica, la cual los navegadores no establecen.
5. Background color (color de fondo). Invisible al igual que el background image y se muestra detrás del contenido.
6. Margin (margen). Esta es la medida de separación que hay entre una caja y otra.

Visto de manera gráfica resulta más comprensible ver la manera en que CSS opera.

Con estos conceptos generales ya podemos comprender mejor el funcionamiento en el que se basa el CSS. Ahora aprender la sintaxis CSS no será un misterio.