Modelo De Cajas HTML CSS

El modelo de cajas o "box model“ condiciona el diseño de todas las páginas web.

Los navegadores consideran cada elemento HTML como una caja, una página web es una realidad un grupo de cajas ordenadas siguiendo ciertas reglas .Estas reglas son establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

Las cajas se crean automáticamente al definir cada elemento HTML

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

• Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)

• Relleno (padding): espacio libre opcional existente entre el contenido y el borde.

• Borde (border): línea que encierra completamente el contenido y su relleno.

• Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.

• Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.

• Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes

Anchura y Altura

La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }

<div id="lateral">

...

</div>

Margen y Relleno

Margen

CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento.

Propiedades margin-top, margin-right, margin-bottom, margin-left

Valores unidad de medida | porcentaje | auto | inherit

Se aplica a Todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a los elementos de bloque y a las imágenes

Valor inicial 0

Descripción Establece cada uno de los márgenes horizontales y verticales de un elemento

Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes:

Las cuatro propiedades relacionadas con los márgenes

Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).

Relleno

Las cuatro propiedades relacionadas con los rellenos

Propiedades padding-top, padding-right, padding-bottom,padding-left

Valores unidad

...