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, margin-bottom, e margin-left.

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>

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.

Sintaxe formal

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

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

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

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

<anchor-element> =
<dashed-ident>

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

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 valueas each of the properties of the shorthand:
Aplica-se aall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritednão
Percentagesrefer to the width of the containing block
Computed valueas each of the properties of the shorthand:
  • margin-bottom: the percentage as specified or the absolute length
  • margin-left: the percentage as specified or the absolute length
  • margin-right: the percentage as specified or the absolute length
  • margin-top: the percentage as specified or the absolute length
Animation typea length

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também