Modelo de cajasen el diseño web

Modelo de cajas o box model

Es una característica del CSS que condiciona el diseño de todo sitio web creado con HTML y CSS.

Todos los elementos de una página son representados por medio de cajas rectangulares.

Estas cajas se crean automáticamente cada vez que se inserta una etiqueta de HTML.

Estas cajas están presentes pero no son visibles si no se indica algún color de fondo o un borde.

Partes de una caja

Estas cajas se componen de cuatro elementos esenciales: margen, relleno, borde y contenido.

Contenido

Padding

Border

Margin

Contenido (Content)

Es la información o contenido de un elemento HTML. Este puede ser texto (párrafos, encabezados, enlaces, listados) o imágenes.

<p>Contenido</p>

Contenido

Relleno (Padding)

Es el espacio libre entre el contenido y el borde de éste. El relleno es una característica opcional.

HTML: <p>Contenido</p>

CSS:

p { padding: 25px;}

Contenido

Borde (Border)

Linea o contorno que encierra el contenido y su relleno.

HTML: <p>Contenido</p>

CSS:

p { padding: 25px;

border: dashed 7px blue;}

Contenido

Margen (Margin)

Separación existente entre la caja y el resto del contenido del sitio web.

HTML: <p>Contenido</p>

CSS:

p { padding: 25px;

border: dashed 7px blue; margin: 50px;}

Contenido