Modelo de Caja

¿Qué nos permite?

Este comportamiento provoca que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulares donde el CSS controla las propiedades y apariencia de las mismas.

Las cajas se crean a medida que se insertan nuevas etiquetas o elementos en la página, estas encierran cada contenido del sitio.

Componentes del Modelo de Caja

Las cajas se componen de un área de contenido, y áreas opcionales como márgenes, rellenos y bordes. Dichas áreas se separan por límites.

Límite del Contenido

Creado por el espacio ocupado por el contenido del elemento.

Límite de Padding

Se encuentra entre el límite del contenido y el borde. Es el espacio libre entre el contenido y el borde que lo encierra.

Límite del Borde

Establecido por el grosor del borde. Línea que encierra completamente el contenido y su relleno.

Límite de Margen

Establecido por el margen del elemento. Espacio libre entre la caja y las posibles cajas adyacentes.

Cálculo del Ancho y Alto Final

El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final del elemento.

En el CSS la anchura es la del contenido, pero se debe tener presente la existencia del resto de los elementos del modelo de la caja que ocupan espacio en el layout.

Ejemplo: Si el ancho del contenido es de 300px, el ancho final (a la vista) que presentará el elemento resulta de la suma de:

ancho contenido (300px) + padding derecha + padding izquierda + borde derecha + borde izquierda + margen derecha + margen izquierda

La altura total se calcula de la misma forma, tomando el eje vertical (arriba y abajo).

Propiedades del Modelo de Caja

margin

margin-top / margin-right / margin-bottom / margin-left

margin: 10px 20px 30px 10px;
/* 10px superior, 20px derecha, 30px inferior, 10px izquierda */

margin: 10px 20px;
/* 10px superior e inferior, 20px derecha e izquierda */

margin: 10px;
/* 10px en todos los lados */

padding

padding-top / padding-right / padding-bottom / padding-left

padding: 10px 20px 30px 10px;
/* 10px superior, 20px derecha, 30px inferior, 10px izquierda */

padding: 10px 20px;
/* 10px superior e inferior, 20px derecha e izquierda */

padding: 10px;
/* 10px en todos los lados */

border

border-width: medium / thin / thick / length;

border-style: dotted / dashed / solid / double / groove / ridge / inset / outset;

border-color: red / #00ff00 / rgb(0,0,255);

Estilos Avanzados

Esquinas Redondeadas

border-radius: 0 20px 30px 25px;
border-radius: 0 20px 30px;
border-radius: 20px 30px;
border-radius: 20px;
border-radius: 50%;

Sombra de Caja

Desplazamiento en x, desplazamiento en y, desenfoque, color, tipo

box-shadow: 20px 20px 50px black inset;
box-shadow: 0px 0px 100px black;

Efectos

Opacidad

opacity: 0.3;
filter: alpha(opacity=30); /* IE8 e inferior */

Colores

color: black; /* Nombre del color */
color: #fff; /* Código Hexadecimal */
color: #ffffff; /* Código Hexadecimal */
color: RGB(0, 0, 0); /* red, green, blue */
color: RGBA(0, 0, 0, 0.3); /* red, green, blue, alpha */
color: HSL(120, 100%, 50%); /* hue, saturation, lightness */