Docs executáveis de CSS: Margin vs padding

Q: Padding ou margin aumenta o tamanho do elemento?

O padding aumenta, com o padrão box-sizing: content-box: ele é somado à largura e à altura. A margin nunca é somada ao tamanho do elemento; ela acrescenta espaço em volta (um bloco com width: auto até fica mais estreito, porque as margens ocupam parte da largura disponível). Com box-sizing: border-box, o padding sai de dentro da largura.

A diferença em uma imagem

O padding fica dentro da borda. A margin fica fora. As duas caixas abaixo têm o mesmo conteúdo e o mesmo valor de 24px; só a propriedade muda. O cinza é o contêiner atrás delas.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

Com padding, os 24px são azuis: fazem parte da caixa, ficam dentro da borda, e a caixa cresce. Com margin, os 24px são cinza: a caixa fica justa em volta do texto e o espaço de fora afasta as bordas do contêiner.

Teste os dois em uma caixa

Mexa os dois controles deslizantes. O padding aumenta a caixa azul; a margin afasta a caixa das bordas cinza sem alterá-la.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Observe a linha do tamanho: ela muda quando você mexe no padding e fica igual quando você mexe na margin.

Margin vs padding em resumo

	Padding	Margin
Onde	Dentro da borda	Fora da borda
Fundo	Mostra o fundo do elemento	Sempre transparente
Faz parte da área de clique	Sim	Não
Soma no tamanho do elemento	Sim, com `content-box`	Não
Aceita `auto`	Não	Sim (`margin: 0 auto` centraliza)
Aceita valor negativo	Não	Sim
Valores verticais colapsam	Nunca	Sim, margens verticais vizinhas colapsam
Porcentagem relativa a	Largura do bloco que o contém	Largura do bloco que o contém
Uso típico	Espaço dentro de botões, cards, inputs	Espaço entre elementos, centralização

Cada propriedade tem a própria página com todos os detalhes: padding CSS e margin CSS.

Qual usar

Faça uma pergunta: o espaço pertence ao elemento ou fica entre elementos?

O respiro em volta do rótulo de um botão, o interior de um card, o espaço entre o texto de um input e a borda: padding. Ele leva o fundo e aumenta o alvo.
O espaço entre dois parágrafos, entre cards, em volta de uma seção: margin, ou gap quando o pai é um contêiner flex ou grid.

A área de clique é onde a escolha mais importa. Os dois links abaixo ocupam o mesmo espaço na página, mas o espaço do primeiro é padding e o do segundo é margin. Só o primeiro é fácil de acertar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

O contorno âmbar tracejado é a borda do elemento, que é a área que responde a cliques e toques. A margin em volta do segundo link é um espaço vazio que não faz nada.

Espaço entre itens: margin ou gap

Para uma linha ou grade de itens, gap no pai flex ou grid costuma ser mais limpo que margens em cada filho: ele só fica entre os itens, nunca antes do primeiro nem depois do último, então não há nada para desfazer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Aqui o contêiner cinza usa padding (espaço dentro dele, cinza), os itens usam padding (espaço dentro de cada um, verde) e o gap cuida do espaço entre eles.

Erros comuns

Usar margin para um espaço que deveria ter cor. A margin é transparente. Se o espaço deve mostrar o fundo, é padding.
Usar margin para aumentar um link. A área de clique termina na borda; use padding.
Esperar que duas margens verticais de 20px deem 40px. Margens verticais vizinhas colapsam para 20px. O padding nunca colapsa.
Tentar padding: auto para centralizar. Só a margin aceita auto.
Esquecer que o padding aumenta a caixa. Acrescente box-sizing: border-box para que width o inclua.

Perguntas frequentes

Qual a diferença entre margin e padding?

Padding é o espaço entre o conteúdo de um elemento e a borda dele, dentro do elemento. Margin é o espaço fora da borda, entre o elemento e os vizinhos. O padding mostra o fundo do elemento; a margin é sempre transparente.

Quando usar padding em vez de margin?

Use padding para o espaço que pertence ao elemento: o respiro em volta do texto de um botão, o interior de um card, tudo o que deve ter o mesmo fundo ou ser clicável. Use margin (ou gap em flex e grid) para o espaço entre elementos separados.

Padding ou margin aumenta o tamanho do elemento?

O padding aumenta, com o padrão box-sizing: content-box: ele é somado à largura e à altura. A margin nunca é somada ao tamanho do elemento; ela acrescenta espaço em volta (um bloco com width: auto até fica mais estreito, porque as margens ocupam parte da largura disponível). Com box-sizing: border-box, o padding sai de dentro da largura.

O padding pode ser negativo como a margin?

Não. Padding negativo é inválido e ignorado, enquanto margens negativas são permitidas e podem fazer elementos se sobreporem. O padding também não aceita auto, e é por isso que a centralização usa margin: 0 auto.

Conceitos relacionados