Propiedad margin

La propiedad margin establece el margen exterior de un elemento. Los valores de la propiedad pueden ser cualquier unidad de tamaño o la propiedad clave auto, que permite al navegador calcular automáticamente el margen del elemento. Por defecto, cada navegador puede añadir diferentes márgenes a los elementos.

Esta propiedad es una forma abreviada para las propiedades margin-top, margin-right, margin-bottom, margin-left.

Sintaxis

cssselector {
  margin: valor;
}

Cantidad de valores

La propiedad margin acepta 1, 2, 3 o 4 valores, enumerados separados por espacios:

Ejemplo

Ahora tendremos un bloque sin márgenes:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 0;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Ejemplo

Y ahora asignaremos al bloque un margen de 10px:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Ejemplo

Establezcamos un margen de 10px en la parte superior e inferior y 20px - en la izquierda y derecha:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px 20px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Ejemplo

Establezcamos un margen de 5px en la parte superior, 15px a la derecha, 25px en la parte inferior y 35px a la izquierda:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 5px 15px 25px 35px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Véase también