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

Sintaxe

/* 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

[ (en-US) <length> (en-US) | (en-US) <percentage> (en-US) | (en-US) auto ] (en-US){ (en-US)1,4} (en-US)

Exemplos

Exemplo simples

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

Mais exemplos

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

Especificação Status Comentário
CSS Box Model
The definition of 'margin' in that specification.
Candidata a Recomendação Nenhuma mudança significativa.
CSS Transitions
The definition of 'margin' in that specification.
Rascunho atual Define margin como animável.
CSS Level 2 (Revision 1)
The definition of 'margin' in that specification.
Recomendação Remove seu efeito em elementos inline.
CSS Level 1
The definition of 'margin' in that specification.
Recomendação Definição inicial.

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 and ::first-line.
Inheritednão
Percentagesrefer to the width of the containing block
Computed valueas each of the properties of the shorthand:
Animation typea length

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também