Docs executáveis de CSS: Margin CSS

O que é margin

Margin é o espaço fora da borda de um elemento. Ela é sempre transparente, e o trabalho dela é afastar os outros elementos. No exemplo, o contêiner cinza aparece através da margin em volta da caixa azul:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

A faixa cinza não faz parte da caixa: o fundo da própria caixa termina na borda dela. Para um espaço que leve o fundo do elemento, use padding.

O shorthand margin

margin recebe de um a quatro valores, na mesma ordem horária do padding:

Declaração	Topo	Direita	Base	Esquerda
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

Cada lado também tem a própria propriedade (margin-top, margin-right, margin-bottom, margin-left) e versões lógicas que seguem a direção do texto (margin-inline-start, margin-inline-end, margin-block, margin-inline).

Ao contrário do padding, a margin aceita auto e valores negativos:

Valor	Exemplo	Observações
Comprimento	`16px`, `1.5rem`	O mais comum
Porcentagem	`5%`	Da largura do bloco que o contém, nos quatro lados
`auto`	`margin: 0 auto`	O navegador preenche o espaço que sobra
Negativo	`margin-top: -10px`	Aproxima o elemento ou o vizinho, pode sobrepor

Centralizar com margin: 0 auto

margin: 0 auto é o jeito clássico de centralizar um bloco na horizontal. auto nos dois lados diz ao navegador para dividir igualmente o espaço que sobra. É preciso uma largura menor que a do contêiner, senão não sobra nada para dividir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Margens auto não centralizam na vertical no fluxo normal (margens auto verticais viram 0) e não fazem nada em elementos inline. Para uma visão completa de centralização, veja como centralizar uma div.

Colapso de margens

Quando duas margens verticais se tocam, elas não se somam. O navegador fica só com a maior. Aqui a primeira caixa tem margin-bottom: 30px e a segunda margin-top: 20px, e o espaço entre elas é 30px, não 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

O colapso é proposital: permite que parágrafos e títulos tenham cada um seu espaçamento sem dobrá-lo onde se encontram. Ele pega as pessoas de surpresa em um segundo caso, em que a margem de cima de um filho escapa do pai:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

No primeiro pai, a margem de 30px do filho colapsou através da borda de cima do pai, então ela empurra o pai inteiro para baixo em vez de criar um espaço cinza dentro dele. Qualquer uma destas opções impede isso:

display: flow-root no pai (ao contrário de overflow: hidden, ele não corta nada).
Padding ou borda no lado de cima do pai.
Um pai flex ou grid: margens de itens flex e grid nunca colapsam.

Margens horizontais nunca colapsam, e as de elementos flutuantes ou com posição absoluta também não.

Margens negativas

Uma margin negativa puxa na direção oposta. No lado de cima ou no início, ela move o próprio elemento; no lado de baixo ou no fim, puxa o elemento seguinte para mais perto. As caixas podem se sobrepor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto no flexbox

Dentro de um contêiner flex, uma margin auto ocupa todo o espaço livre do lado dela. É o jeito mais simples de empurrar um item para a outra ponta de uma linha, e no flexbox o auto também funciona na vertical:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto põe o espaço livre antes de "Log in", no fim da linha tanto em páginas da esquerda para a direita quanto da direita para a esquerda.

Erros comuns

margin: 0 auto em um elemento sem largura. Um bloco já ocupa o contêiner inteiro; defina width ou max-width.
margin: auto em um elemento inline. Margens auto em span, a ou em um img deixado inline valem 0. Use display: block.
Somar duas margens verticais e esperar o total. Elas colapsam para a maior; use gap em flex ou grid, ou uma única direção de margem de forma consistente.
A margem de um filho empurrando o pai. Isso é o colapso entre pai e filho; acrescente display: flow-root ao pai.
Usar margin para um espaço que deveria ter fundo. A margin é transparente; use padding.

Perguntas frequentes

O que é margin no CSS?

Margin é o espaço fora da borda de um elemento. Ela é transparente e afasta os elementos vizinhos. É definida com margin ou com as propriedades de cada lado, margin-top, margin-right, margin-bottom e margin-left.

O que margin: 0 auto faz?

Define as margens de topo e base como 0 e divide igualmente o espaço horizontal que sobra entre as margens esquerda e direita, o que centraliza um elemento de bloco na horizontal. O elemento precisa de uma largura menor que o contêiner, por exemplo max-width: 600px.

Por que margin auto não centraliza meu elemento?

Normalmente porque o elemento não tem largura (um bloco ocupa o contêiner inteiro, então não sobra nada para dividir) ou porque ele é inline (span, a, img por padrão), e aí as margens auto valem 0. Dê a ele uma largura e display: block, ou centralize pelo pai com flexbox ou grid.

O que é colapso de margens?

Quando duas margens verticais se encontram, por exemplo a margem de baixo de um parágrafo e a de cima do seguinte, o navegador usa só a maior em vez de somá-las. Isso acontece apenas com margens verticais de caixas de bloco no fluxo normal, não em layouts flex ou grid.

A margin pode ser negativa?

Sim. Uma margin negativa puxa o elemento para aquele lado, ou puxa o elemento seguinte por cima dele, então as caixas podem se sobrepor. É útil para pequenos ajustes de alinhamento e para deixar um elemento sair do padding do contêiner.

Conceitos relacionados