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

selector {
	margin: valor;
}

Cantidad de valores

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

Cantidad	Descripción
`1`	Un valor establece el margen en todos los lados del elemento.
`2`	El primer valor establece el margen superior e inferior, y el segundo - el derecho e izquierdo.
`3`	El primer valor establece el margen superior, el segundo - el derecho e izquierdo, y el tercero - el inferior.
`4`	El primer valor establece el margen superior, el segundo - el derecho, el tercero - el inferior, y el cuarto - el izquierdo.

Ejemplo

Ahora tendremos un bloque sin márgenes:

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

#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:

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

#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:

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

#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:

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

#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

la propiedad padding,
que establece el relleno interior