Propriedade CSS margin — Sintaxe, Valores e Exemplos

A propriedade CSS margin cria espaço fora da borda de um elemento — a distância entre esse elemento e seus vizinhos. Ao contrário do padding, que adiciona espaço dentro da borda, a margin empurra o restante do conteúdo para longe do elemento.

Esta página aborda a sintaxe abreviada, como funciona o padrão de um a quatro valores, o centramento com auto, margens negativas e a regra de colapso de margens que surpreende a maioria dos iniciantes.

Para o que margin é um atalho

A propriedade margin é um atalho que define todas as quatro propriedades de lado individuais em uma única declaração:

O padrão de um a quatro valores

Como margin é um atalho, o número de valores fornecidos determina a quais lados eles se aplicam. Os valores sempre percorrem no sentido horário começando pelo topo (cima → direita → baixo → esquerda):

Quatro valores — margin: 25px 10px 15px 20px; define cima 25px, direita 10px, baixo 15px, esquerda 20px.
Três valores — margin: 15px 10px 20px; define cima 15px, direita e esquerda 10px, baixo 20px.
Dois valores — margin: 15px 10px; define cima e baixo 15px, direita e esquerda 10px.
Um valor — margin: 15px; aplica 15px a todos os quatro lados.

Um bom recurso mnemônico para a forma de quatro valores é a palavra TRouBLe (Top, Right, Bottom, Left).

Informação

Valores negativos são válidos.

Informação

As margens superior e inferior não têm efeito em elementos inline, como <span> ou <code>.

Valor Inicial	0
Aplica-se a	Todos os elementos.
Herdado	Não.
Animável	Sim. A margin é animável.
Versão	CSS1
Sintaxe DOM	Object.style.margin = "20px 10px";

Sintaxe

Sintaxe da propriedade CSS margin

margin: length | auto | initial | inherit;

Exemplo da propriedade margin:

Exemplo da propriedade CSS margin com quatro valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade margin, onde a margem de um elemento é definida em 10% para todos os lados:

Exemplo da propriedade CSS margin com valor % (percentagem)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade margin definida como "em":

Exemplo da propriedade CSS margin com valor em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Experimente Você Mesmo »

Vejamos o seguinte exemplo que mostra a diferença entre as propriedades margin, padding e border:

Exemplo da propriedade margin com as propriedades padding e border:

Exemplo da propriedade CSS margin com um valor (px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Experimente Você Mesmo »

Centrando um bloco com `margin: auto`

Definir as margens esquerda e direita como auto é a forma clássica de centralizar horizontalmente um elemento block-level que tenha uma largura explícita. O navegador divide igualmente o espaço horizontal restante entre os dois lados:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        margin: 0 auto;
        background-color: #1c87c9;
        color: #fff;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">I am centered horizontally.</div>
  </body>
</html>

margin: 0 auto; significa margens superior e inferior iguais a 0 e auto na esquerda e direita. Note que auto centraliza apenas horizontalmente — não centraliza verticalmente. Para centralização vertical, use Flexbox ou Grid.

Margens negativas

As margens aceitam valores negativos, que puxam um elemento em direção ao seu vizinho (ou para além do seu contêiner) em vez de afastá-lo. Isso é útil para sobrepor elementos ou empurrar um item além do padding do seu elemento pai:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .second {
        margin-top: -20px;
        background-color: #8ebf42;
        color: #fff;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>First paragraph.</p>
    <p class="second">This paragraph is pulled up to overlap the one above.</p>
  </body>
</html>

Colapso de margens

Quando as margens superior e inferior de dois elementos block se encontram verticalmente, elas não se somam — em vez disso, colapsam em uma única margem igual à maior das duas. Assim, um parágrafo com margin-bottom: 30px; seguido de um com margin-top: 20px; produz um espaçamento de 30px entre eles, não 50px.

Informação

O colapso de margens afeta apenas as margens verticais (superior/inferior) de caixas block-level no fluxo normal. Margens esquerda e direita nunca colapsam, e as margens de itens Flex ou Grid também não colapsam.

Valores

Valor	Descrição	Experimente
auto	Define a margem. É o valor padrão desta propriedade.	Experimente »
length	Define uma margem em px, pt, cm, etc. O valor padrão é 0.	Experimente »
%	Define a margem em % do elemento contêiner.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

Quais das afirmações a seguir são verdadeiras sobre as margens CSS?

As margens são usadas para criar espaço ao redor dos elementos, fora de qualquer borda definida.As margens não têm propriedades.Com CSS, você tem controle total sobre as margens.Existem propriedades para definir a margem de cada lado de um elemento (superior, direita, inferior e esquerda).As margens são sempre transparentes.Você pode usar valores negativos para criar efeitos de sobreposição.A propriedade margin-clear permite definir a margem de um elemento.

Para o que margin é um atalho

O padrão de um a quatro valores

Sintaxe

Exemplo da propriedade margin:

Resultado

Exemplo da propriedade margin, onde a margem de um elemento é definida em 10% para todos os lados:

Exemplo da propriedade margin definida como "em":

Exemplo da propriedade margin com as propriedades padding e border:

Centrando um bloco com margin: auto

Margens negativas

Colapso de margens

Valores

Prática

Centrando um bloco com `margin: auto`