margin

/* Aplica para todos os quatro lados */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* topo | horizontal | inferior */
margin: 1em auto 2em;

/* topo | direita | inferior | esquerda */
margin: 2px 1em 0 auto;

/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;

A propriedade margin pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um <length>, uma <percentage>, ou a palavra-chave auto. Cada valor pode ser positivo, zero ou negativo.

• Quando um valor é especificado, a mesma margem é aplicada para todos os quatro lados.
• Quando dois valores são especificados, a primeira margem é aplicada aos lados superior e inferior, e a segunda aos lados esquerdo e direito.
• Quando três valores são especificados, a primeira margem é apliacada ao topo, a segunda aos lados esquerdo e direito, e a terceira ao lado inferior.
• Quando quatro valores são especificados, as margens são aplicadas aos lados superior, direito, inferior e esquerdo, nesta ordem (sentido horário).

<length>

O tamanho da margem como um valor fixo.

<percentage>

O tamanho da margem como um percetual, relativo à largura do bloco em que o elemento está contido.

auto

O navegador seleciona uma margem adequada para utilizar. Por exemplo, em alguns casos este valor pode ser utilizado para centralizar o elemento.

margin = 
  <'margin-top'>{1,4}  

<margin-top> = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

HTML

<div class="center">Este elemento está centralizado.</div>

<div class="outside">
  Este elemento está posicionado fora de seu bloco recipiente.
</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Para centralizar algo horizontalmente em navegadores modernos, você pode utilizar display: flex; justify-content: center;

Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, estes não estão disponíveis. Para centralizar um elemento dentro de seu pai, use margin: 0 auto; .

Às vezes, as margens superior e inferior de elementos são colapsadas em uma única margem que é igual à maior das duas margens. Veja Dominando margin collapsing para mais informações.

• CSS Box Model
• Margin collapsing