Box Model no CSS: padding, border e margin explicados com exemplos

Você já tentou afastar um botão do texto, aumentou um número no CSS e o botão ficou maior em vez de se afastar? Ou definiu uma largura de 300px e o elemento apareceu com 350px na tela? Se isso já aconteceu, o culpado tem nome: você ainda não estava enxergando o Box Model, o modelo de caixa do CSS.

Entender esse conceito é o que separa quem “vai chutando valores até ficar bom” de quem monta layouts com precisão. Neste artigo vamos destrinchar as quatro camadas de toda caixa — content, padding, border e margin — com ilustrações, exemplos de código e as armadilhas mais comuns que vejo em sala de aula.

Todo elemento HTML é uma caixa

Para o navegador, não existe parágrafo, imagem ou botão: existe uma caixa retangular. Um <p> é uma caixa, um <img> é uma caixa, até um <a> no meio de uma frase é uma caixa. E toda caixa é formada por quatro camadas, uma envolvendo a outra, como as camadas de uma cebola.

Guarde esta frase, porque ela resolve 90% das dúvidas: padding afasta o conteúdo da borda (espaço de dentro); margin afasta a caixa das outras caixas (espaço de fora).

Content: width e height

O conteúdo é a área que você dimensiona com width (largura) e height (altura). Na maioria das vezes é melhor deixar a altura livre, crescendo conforme o texto, e controlar só a largura:

.caixa {
  width: 300px;        /* largura do conteúdo */
  max-width: 100%;     /* nunca passa da largura da tela */
  background: #8FB6E6;
}

Padding: o espaço de dentro

Você pode definir o padding de cada lado separadamente:

.caixa {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Ou, bem mais comum, usar a forma abreviada (shorthand) em uma única linha:

.caixa {
  padding: 10px 20px;   /* 10px em cima e embaixo, 20px nas laterais */
}

Como o fundo se estende pelo padding, é ele que faz um botão parecer “gordinho” e clicável. Um link com padding: 12px 24px e fundo colorido vira instantaneamente um botão.

Border: a linha que contorna

A borda tem três ingredientes: largura, estilo e cor. Sem o estilo, ela simplesmente não aparece — esse é um esquecimento clássico.

.caixa {
  border-width: 3px;
  border-style: solid;   /* solid, dashed, dotted, double, none... */
  border-color: #C4262E;

  /* ou tudo junto, na forma abreviada: */
  border: 3px solid #C4262E;
}

Também dá para estilizar só um lado, o que é ótimo para destaques e citações:

.destaque {
  border-left: 5px solid #C4262E;
  padding-left: 16px;
}

E, embora não faça parte das quatro camadas, vale conhecer a prima da borda: border-radius, que arredonda os cantos da caixa (incluindo o fundo).

.cartao { border-radius: 12px; }
.avatar { border-radius: 50%; }   /* vira um círculo se a caixa for quadrada */

Margin: o espaço de fora

A margem funciona com a mesma sintaxe do padding, mas age do lado de fora da borda:

.caixa {
  margin: 20px;            /* 20px de distância em todos os lados */
  margin-bottom: 40px;     /* ou só em um lado */
}

O truque do margin: auto

Quando um elemento de bloco tem largura definida, margin: 0 auto divide o espaço sobrando igualmente entre esquerda e direita — ou seja, centraliza a caixa na horizontal:

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;   /* 0 em cima/embaixo, auto nas laterais */
}

Cuidado: margens verticais se “fundem”

Se um parágrafo tem margin-bottom: 30px e o próximo tem margin-top: 20px, a distância entre eles não será 50px, e sim 30px. As margens verticais de elementos de bloco vizinhos se sobrepõem e prevalece a maior. Isso se chama margin collapse, acontece só na vertical (nunca na horizontal) e não acontece com padding.

A regra do relógio: como ler 1, 2, 3 ou 4 valores

Padding e margin aceitam de um a quatro valores na forma abreviada. Com quatro valores, a ordem segue os ponteiros do relógio, começando pelo topo: top → right → bottom → left.

Quanto espaço a caixa ocupa de verdade?

Aqui mora a surpresa dos 350px do começo do artigo. Por padrão, width define só a largura do conteúdo. Padding e borda são somados por fora. Veja:

.caixa {
  width: 300px;
  padding: 20px;
  border: 5px solid #1d2327;
  margin: 10px;
}

Em layouts com colunas, esses pixels extras são exatamente o que faz a última coluna “cair” para a linha de baixo.

box-sizing: border-box, a solução

A propriedade box-sizing muda a regra do jogo. Com border-box, o width passa a incluir padding e borda: se você pediu 300px, a caixa terá 300px visíveis, e o conteúdo é que encolhe para caber.

É tão mais previsível que a maioria dos projetos profissionais aplica essa regra a todos os elementos logo no início do CSS:

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

Mão na massa: um cartão usando as quatro camadas

Vamos juntar tudo em um componente real. Repare como cada camada tem um papel claro:

<div class="cartao">
  <h4>Curso de HTML e CSS</h4>
  <p>Aprenda a construir páginas do zero, entendendo cada camada do layout.</p>
  <a href="#" class="botao">Quero aprender</a>
</div>

.cartao {
  box-sizing: border-box;
  max-width: 320px;
  margin: 0 auto;              /* MARGIN: centraliza o cartão */
  padding: 24px;               /* PADDING: afasta o texto da borda */
  border: 2px solid #e2e5ea;   /* BORDER: contorno discreto */
  border-radius: 12px;
  background: #fff;
}

.cartao h4 { margin: 0 0 8px; }     /* margin só embaixo do título */
.cartao p  { margin: 0 0 16px; }    /* espaço antes do botão */

.botao {
  display: inline-block;       /* permite padding vertical em um link */
  padding: 10px 20px;          /* deixa o botão "clicável" */
  border-radius: 8px;
  background: #C4262E;
  color: #fff;
  text-decoration: none;
}

O resultado:

Enxergue o Box Model no navegador

Você não precisa imaginar as camadas: o navegador mostra. Abra qualquer página, clique com o botão direito em um elemento e escolha Inspecionar (ou pressione F12). Na aba Computed (Calculado) aparece o diagrama do box model daquele elemento, com os valores reais de margin, border, padding e content. Passe o mouse sobre o elemento no código e cada camada é destacada em uma cor diferente na página.

Esse é o melhor hábito que um iniciante pode criar: quando o layout fizer algo estranho, inspecione antes de mudar valores no escuro.

Resumo rápido

Desafio para praticar

Crie três cartões lado a lado, cada um com width: 33.33%, padding: 20px e border: 2px solid. Primeiro, sem box-sizing: observe o terceiro cartão quebrar para a linha de baixo. Depois, adicione box-sizing: border-box e veja os três se alinharem. Por último, abra o Inspecionar e confira a largura calculada de cada um nos dois casos. Se você entender por que isso acontece, entendeu o Box Model.

Washington Paiva — instrutor de Desenvolvimento de Sistemas · washington.pro.br