El modelo de cajas

Los elementos de un documento HTML son considerados como una caja rectangular invisible al usuario y en la que se pueden aplicar ciertas propiedades para ubicar los elementos respecto a otros.

Modelo de cajas CSS
  • LinkedIn
  • Twitter
  • Facebook
  • Google+

Imagen obtenida de  Mozilla en The box model.

margin: margen exterior, que separa la caja del elemento de las demás. si escribimos margin:5px; establecemos un margen de 5 píxeles en los 4 lados de la caja.  Podemos especificarlos de forma independiente mediante margin-topmargin-right, margin-bottom y margin-left.

padding: margen interno o relleno, que se aplica del borde hacia adentro. Se puede usar de forma independiente también con padding-toppadding-rightpadding-bottom y padding-left.

Cualquiera de las propiedades anteriores las podemos especificar también en una sola indicando los 4 valores uno detrás de otro, comenzando desde arriba y en sentido horario:

padding: 10px 5px 10px 6px;

Por tanto, la propiedad anterior especifica un padding de 10px arriba, 5 a la derecha, 10 abajo y 6 a la izquierda.

Un truco para centrar cajas dentro de su contenedor es asignar el valor auto a la derecha y a la izquierda:

padding: 10px auto 10px auto;

Adicionalmente, se pueden expresar los valores dos a dos si se repiten el de arriba y el de abajo o el de izquierda y derecha:

padding: 10px auto;

Esta propiedad provocaría un efecto igual a la anterior.

background-color: para asignar un color de fondo a la caja.

background-image: Para asignar una imagen de fondo a la caja mediante el valor url(‘imagen.jpg’), siendo imagen.jpg la ubicación del archivo de la imagen que queramos utilizar.

border-width: para definir el grosor del borde, por ejemplo, 2px.

border-style: Para especificar el tipo de línea del borde. Hay varios tipos que podemos consultar aquí, pero lo normal es usar el valor solid.

border-color: Asignamos el color del borde.

border: con esta propiedad podemos especificar las tres anteriores en una en el mismo orden que las hemos indicado. El único valor que no podemos omitir sería el segundo, indicando el estilo de línea.

border: 4px dotted blue;

overflow: Con esta propiedad especificamos los que ocurre cuando el contenido no cabe en la caja. Los posibles valroes son:

  • visible. Valor predefinido. Aunque el contenido supere el tamaño dela caja, s