Margin

La propiedad margin nos permite agregar un espacio imaginario por fuera de nuestra caja. Esto nos permite separar elementos entre si y generar un layout más ordenado.

Al igual que el "padding", podemos asignar esta propiedad un lado a la vez o a todos lados al mismo tiempo de la siguiente manera:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin

Lados individuales

div {margin-top: 20px;} div {margin-right: 40px;} div {margin-bottom: 10px;} div {margin-left: 100px;}

Este código aplicado a nuestra caja se vería así:

Cupcake ipsum dolor sit amet caramels. Dragée I love soufflé applicake chocolate cake pastry applicake. I love cheesecake chocolate bar fruitcake.

Lados al mismo tiempo

div {padding: 20px 40px 10px 100px;}

Recuerda que comenzamos por arriba y seguimos según las manecillas del reloj con el lado derecho, abajo y finalmente izquierdo.

Este código aplicado a nuestra caja se vería así:

Cupcake ipsum dolor sit amet caramels. Dragée I love soufflé applicake chocolate cake pastry applicake. I love cheesecake chocolate bar fruitcake.

Los atajos vistos para el padding, se aplican para el margin:

div {margin: 20px;} div {margin: 20px 10px;} div {margin: 20px 50px 10px;}

Y los valores corresponden a:

Cuando hay un valor
El valor corresponderá a los cuatro lados por igual.
Cuando hay dos valores
El primer valor corresponde a top y bottom. El segundo valor a right y left
Cuando hay tres valores
El primer valor corresponde a top. El segundo valor a left y right. El tercero corresponde a bottom

Características adicionales de la propiedad margin

El atributo margin acepta el valor "auto", el cual permite al navegador calcular el espacio para llenar el área disponible de la caja contenedora.

Este valor es especialmente útil para centrar elementos en bloque dentro de un contenedor.

Ejemplo

Cupcake ipsum dolor sit amet caramels. Dragée I love soufflé applicake chocolate cake pastry applicake. I love cheesecake chocolate bar fruitcake.

El cuadro del ejemplo se ubica en el centro horizontal de su contenedor, para esto, aplicamos margin de la siguiente manera:

div {margin:0 auto;}

Como vimos anteriormente, dos valores indican que el margen superior e inferior corresponden a 0(cero) y los márgenes izquierdo y derecho deben calcularse automáticamente.

Importante
  • Esta técnica sólo puede aplicarse a elementos en bloque.
  • El elemento contenedor debe tener definido un valor width

Comportamiento del margen - Colapsar

Un comportamiento significativo de la regla margin es lo que se llama "colapso".

Este comportamiento significa que cuando existen dos elementos adyacentes, sus márgenes verticales no se acumulan, sino que el mayor de ellos se mantiene y se utiliza.

Para más información respecto a este comportamiento, puedes visitar los siguientes artículos:

Márgenes en elementos en linea

Algunas características:

  • Al aplicar margin a un elemento en linea como el texto, sólo los valores left y right se aplicarán, los márgenes arriba y abajo serán ignorados por el navegador.
  • Las etiquetas <img /> también son elementos en linea, sin embargo, el valor de margen si se aplicará a todos los lados.