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

cssseletor {
  margin: valor;
}

Quantidade de valores

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

Exemplo

Agora teremos um bloco sem margens:

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

Результат:

Exemplo

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

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

Результат:

Exemplo

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

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

Результат:

Exemplo

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

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

Результат:

Veja também