margin
======

A propriedade **`margin`** do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: `margin-top`, `margin-right` (en-US), `margin-bottom`, e `margin-left` (en-US).

Experimente
-----------

Sintaxe
-------


```css
/\* 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).
### Valores

**`<length>` (en-US)**

O tamanho da margem como um valor fixo.

`<percentage>` (en-US)

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.

### Sintaxe formal
```

margin =   
  <'margin-top'>{1,4} (en-US)    
  
```

Exemplos
--------

### Exemplo simples

#### HTML


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

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


#### CSS


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

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

### Mais exemplos


```css
margin: 5%; /\* todos os lados: margem de 5% \*/

margin: 10px; /\* todos os lados: margem de 10px \*/

margin: 1.6em 20px; /\* topo e inferior: margem de 1.6em \*/
/\* esquerda e direita: margem de 20px \*/

margin: 10px 3% 1em; /\* topo: margem de 10px \*/
/\* esquerda e direita: margem de 3% \*/
/\* inferior: margem de 1em \*/

margin: 10px 3px 30px 5px; /\* topo: margem de 10px \*/
/\* direita: margem de 3px \*/
/\* inferior: margem de 30px \*/
/\* esquerda: margem de 5px \*/

margin: 2em auto; /\* topo e inferior: margem de 2em \*/
/\* caixa está horizontalmente centralizada \*/

margin: auto; /\* topo e inferior: margem de 0 \*/
/\* caixa está horizontalmente centralizada \*/
```

Notas
-----

### Centralização horizontal

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;` .

### Colapso de margens

À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.

Especificações
--------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin |

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `margin-bottom`: `0`
* `margin-left` (en-US): `0`
* `margin-right` (en-US): `0`
* `margin-top`: `0`
 |
| Aplica-se a | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:* `margin-bottom`: the percentage as specified or the absolute length
* `margin-left` (en-US): the percentage as specified or the absolute length
* `margin-right` (en-US): the percentage as specified or the absolute length
* `margin-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* CSS Box Model
* Margin collapsing