Referencia de CSS

Propiedad margin

DefiniciónEstablece la anchura de algunos o todos los márgenes de los elementos
Valores
permitidos
Uno, dos, tres o cuatro de los siguientes valores:
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicialCada margen define su propio valor por defecto
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-margin

Ejemplos de uso

La propiedad margin es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

Si se quiere establecer el mismo valor para todos los márgenes de un elemento, se podría utilizar la siguiente regla CSS:

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

Utilizando la propiedad margin, es posible establecer de forma abreviada el mismo valor a todos los márgenes de un elemento:

div {
  margin: 10px;
}

La propiedad margin es tan poderosa que permite establecer uno, dos, tres o los cuatro márgenes de forma simultánea.

Si se indican dos valores, el primero hace referencia a los márgenes verticales y el segundo es el valor de los márgenes horizontales, de modo que las siguientes reglas CSS son equivalentes:

div {
  margin: 10px 20px;
}

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

Si se indican tres valores, el primero hace referencia al margen superior, el segundo es el valor de los márgenes horizontales y el tercero es el margen inferior, de modo que las siguientes reglas CSS son equivalentes:

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

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

Por último, si se indican cuatro valores, el primero es el margen superior, el segundo es el margen derecho, el tercero es el margen inferior y el cuarto es el margen izquierdo, de modo que las siguientes reglas CSS son equivalentes:

div {
  margin: 10px 20px 30px 40px;
}

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

El uso de propiedades como margin no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS.