Docs executáveis de CSS: Box model

Q: O que box-sizing: border-box faz?

Faz width e height incluírem o padding e a borda. Uma caixa com width: 200px, padding: 20px e borda de 5px passa a ter exatamente 200px de largura, e a área de conteúdo encolhe para 150px para caber. O padrão, content-box, soma o padding e a borda por cima, dando 250px.

Q: Como calcular a largura total de um elemento?

Com o content-box padrão: width + padding esquerdo e direito + borda esquerda e direita. Com border-box: só o width. A margin fica fora da caixa nos dois casos, então ela soma no espaço que o elemento ocupa, não na largura dele.

Q: Devo usar box-sizing: border-box em tudo?

A maioria dos projetos usa, com , ::before, *::after { box-sizing: border-box; } no topo da folha de estilo. Isso faz larguras em porcentagem e padding somarem do jeito que as pessoas esperam, e frameworks como Bootstrap e Tailwind trazem o mesmo reset.

As quatro camadas de toda caixa

Todo elemento da página é desenhado como um retângulo com quatro camadas, de dentro para fora:

Conteúdo: o texto, a imagem ou os elementos filhos, dimensionados por width e height.
Padding: espaço dentro da caixa, entre o conteúdo e a borda. Ele mostra o fundo do elemento.
Borda: a linha em volta do padding.
Margin: espaço fora da borda que afasta as outras caixas. Sempre transparente.

No exemplo, cada camada tem sua cor: conteúdo azul, padding verde, uma borda escura e, em volta da caixa, uma área âmbar que é a margin (desenhada por um invólucro, já que a margin em si é transparente).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

A linha embaixo da caixa é medida pelo navegador: 160 + 20 + 20 + 10 + 10 = 220px. A margin acrescenta mais 24px de cada lado, mas fica fora da caixa, então não entra nos 220.

A conta da largura: content-box vs border-box

Por padrão (box-sizing: content-box), width define só o conteúdo. Padding e borda são somados por cima, e a caixa acaba mais larga que o número que você escreveu. Com box-sizing: border-box, width é a caixa inteira, e o conteúdo encolhe para dar lugar ao padding e à borda.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (padrão)	`border-box`
`width` significa	O conteúdo	Conteúdo + padding + borda
`width: 200px; padding: 20px; border: 5px`	250px de largura	200px de largura
Área de conteúdo nesse caso	200px	150px
Margin	Fora, não conta	Fora, não conta

O reset com border-box

Como o border-box faz os tamanhos somarem certo, quase toda folha de estilo moderna começa com esta regra:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Ela faz mais diferença com porcentagens. Duas colunas width: 50% com padding não cabem em uma linha com content-box, porque cada uma tem 50% mais o padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(Os comentários HTML removem o espaço entre as colunas inline-block, que senão acrescentaria alguns pixels.)

Ver o box model no DevTools

Todo navegador desenha o box model para você. Clique com o botão direito em um elemento, escolha Inspecionar e abra a aba Computed (Layout no Firefox): um diagrama mostra o tamanho do conteúdo no meio, cercado pelos valores de padding, borda e margin. Passar o mouse sobre um elemento no painel Elements também colore a página: conteúdo em azul, padding em verde, margin em laranja.

Caixas inline seguem outras regras

O box model acima descreve caixas de bloco como <div> e <p>. Elementos inline como <span>, <a> e <strong> ficam dentro de uma linha de texto e tratam o espaço vertical de outro jeito:

Propriedade	Em um elemento inline
`width`, `height`	Ignoradas
Padding, borda e margin horizontais	Aplicados, e empurram os vizinhos para os lados
Padding e borda verticais	Desenhados, mas não empurram as linhas de cima e de baixo
Margin vertical	Ignorada

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block dá a um elemento dentro da linha o box model completo: largura, altura, padding e margin ocupam espaço. Veja padding CSS e margin CSS para cada camada em detalhe.

Erros comuns

Pôr padding em uma caixa de largura fixa e estranhar que ela cresceu. Com content-box, padding e borda são somados ao width. Use border-box.
Esperar que a margin pegue a cor de fundo. A margin é sempre transparente; use padding para um espaço colorido.
Definir height ou margin vertical em um elemento inline. Nada acontece; use display: inline-block ou block.
Esquecer as bordas na conta. Uma borda de 1px em um elemento width: 100% o deixa 2px mais largo com content-box, o que pode criar uma barra de rolagem horizontal.
Confundir margin e padding. Resumindo: o padding fica dentro da borda, a margin fora. A página margin vs padding coloca os dois lado a lado.

Perguntas frequentes

O que é o box model do CSS?

É a regra de que todo elemento é desenhado como uma caixa retangular com quatro camadas: o conteúdo, o padding em volta dele, a borda em volta do padding e a margin por fora da borda. Largura, altura e espaçamento no CSS são todos definidos nessas camadas.

O que box-sizing: border-box faz?

Faz width e height incluírem o padding e a borda. Uma caixa com width: 200px, padding: 20px e borda de 5px passa a ter exatamente 200px de largura, e a área de conteúdo encolhe para 150px para caber. O padrão, content-box, soma o padding e a borda por cima, dando 250px.

Como calcular a largura total de um elemento?

Com o content-box padrão: width + padding esquerdo e direito + borda esquerda e direita. Com border-box: só o width. A margin fica fora da caixa nos dois casos, então ela soma no espaço que o elemento ocupa, não na largura dele.

A margin faz parte do box model?

Sim, é a camada mais externa, mas é sempre transparente e nunca entra na largura nem no fundo do próprio elemento. Ela só afasta as caixas vizinhas.

Devo usar box-sizing: border-box em tudo?

A maioria dos projetos usa, com *, *::before, *::after { box-sizing: border-box; } no topo da folha de estilo. Isso faz larguras em porcentagem e padding somarem do jeito que as pessoas esperam, e frameworks como Bootstrap e Tailwind trazem o mesmo reset.

Conceitos relacionados