Box Model
Principalmente cada una de esas cajas del sitio no se visualizan debido a que no, muestran ningún indicio de color de fondo o ningún borde, una manera de verlo es inspeccionando el código, al momento de pasar el cursor sobre un elemento lo que se resalta es un rectángulo, esta es esa particular forma en la que el navegador dibuja y visualiza estas cajas se llama el LAYOUT, el cual hace referencia a la geometría o distribución en la web.
En el desarrollo del modelo de cajas se presentan dos tipos de cajas o de elementos HTML:
-Elementos en línea (Inline Elements):
Los elementos en línea (Inline elements) son aquellos que solo ocupan su contenido y no se puede modificar su ancho o alto.
-Elementos Block (Block elements):
Los elementos block son aquellos que ocupan todo el ancho disponible en el sitio y se les puede asignar un ancho y alto. Generalmente son secciones contenedoras.
Cada caja se compone de cuatro áreas, las cuales son establecidas con respectivos limites:
-Área contenido (content área):
El área es aquella parte donde se introduce el contenido de un elemento, como texto o imágenes.
-Padding:
Es el área entre el borde de la caja y el contenido. El padding se puede configurar mediante las propiedades CSS padding-top, padding-right, padding-bottom y padding-left.
-Border:
El borde aquella línea que rodea al contenido y al padding, es decir, es la separación entre una caja y su borde o límite. El tamaño, estilo y color del borde se pueden modificar mediante las propiedades de CSS border-width, border-style y border-color.
-Margin:
Es el área entre la caja y los elementos cercanos. El margin se puede formar o moldear por medio las propiedades CSS margin-top, margin-right, margin-bottom y margin-left.
