Propriedade margin

A propriedade margin define a margem externa do elemento. Os valores da propriedade podem ser quaisquer unidades de medida ou a palavra-chave auto, que permite ao navegador calcular a margem do elemento automaticamente. Por padrão, cada navegador pode adicionar margens diferentes aos elementos.

A propriedade é uma abreviação para as propriedades margin-top, margin-right, margin-bottom, margin-left.

Sintaxe

seletor {
	margin: valor;
}

Quantidade de valores

A propriedade margin aceita 1, 2, 3 ou 4 valores, listados separados por espaços:

Quantidade	Descrição
`1`	Um valor define a margem em todos os lados do elemento.
`2`	O primeiro valor define a margem superior e inferior, e o segundo - a direita e esquerda.
`3`	O primeiro valor define a margem superior, o segundo - a direita e esquerda, e o terceiro - a inferior.
`4`	O primeiro valor define a margem superior, o segundo - a direita, o terceiro - a inferior, e o quarto - a esquerda.

Exemplo

Agora teremos um bloco sem margens:

<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;
}

Exemplo

Agora vamos definir uma margem de 10px para o bloco:

<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;
}

Exemplo

Vamos definir uma margem de 10px na parte superior e inferior e 20px - na esquerda e direita:

<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;
}

Exemplo

Vamos definir uma margem de 5px na parte superior, 15px na direita, 25px na inferior e 35px na esquerda:

<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;
}

Veja também

a propriedade padding,
que define a margem interna