Post on 12-Jan-2016
description
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