Modelo de caixa

O Laboratório Belavista é um ateliê fictício de tipografia e cartaz no bairro de Belavista, Recife. A partir deste capítulo o site ganha CSS próprio em styles.css. Não edite frameworks de terceiros; o estilo do volume fica no arquivo do projeto.

O exemplo deste capítulo é 21-modelo-de-caixa, no pacote que acompanha o volume. Leia o HTML e o CSS, mude uma coisa (largura, padding ou box-sizing), preveja, recarregue e confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

Tudo que o CSS desenha é uma caixa — mesmo um círculo com border-radius. Entender o modelo de caixa evita “por que ficou mais largo que 100px?”.

O que você vai aprender

• Separar content box, padding, border e margin.
• Distinguir tamanho intrínseco e extrínseco.
• Usar box-sizing: border-box de forma previsível.
• Inspecionar a caixa nas ferramentas do navegador.
• Ligar styles.css sem tocar em simple.css.

Quatro áreas

A content box guarda o texto ou os filhos. A padding box é o espaço interno; o fundo do elemento aparece aí. A border box é a moldura. A margin box é o vão externo até o vizinho. outline e box-shadow ocupam a região da margem sem somar ao tamanho de layout.

Analogia de moldura: a arte é o conteúdo; o passe-partout é o padding; a moldura é a borda; o espaço na parede entre quadros é a margem.

Intrínseco e extrínseco

Tamanho extrínseco fixa width/height e o conteúdo pode transbordar. Tamanho intrínseco deixa o navegador decidir pela medida do conteúdo (min-content, ou simplesmente não fixar a largura).

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Caixa — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1>Cartaz da semana</h1>
      <p class="cartaz">CSS é impressão digital.</p>
    </main>
  </body>
</html>

.cartaz {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid #1a1a1a;
}

Com box-sizing padrão (content-box), a largura total vira 100 + 40 de padding + 2 de borda = 142px. O conteúdo “estoura” o que você pensou ser 100px.

Controlar com box-sizing

box-sizing: border-box faz width e height incluir padding e borda. A content box encolhe por dentro. Muitos projetos começam assim:

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

.cartaz {
  box-sizing: border-box;
  width: 100px;
  padding: 20px;
  border: 1px solid #1a1a1a;
}

Agora a borda externa mede 100px. O texto interno tem menos espaço — e isso fica explícito.

Erro comum: misturar content-box em um bloco e border-box em outro sem perceber. A mesma width: 200px passa a significar coisas diferentes. Padronize cedo.

Display e a folha do navegador

O user agent define defaults: div é block, span é inline, li é list-item. Elemento inline ignora boa parte de margem no eixo de bloco; inline-block respeita melhor. block ocupa a linha disponível.

Inspecione um elemento nas DevTools e abra o diagrama do box model. Confira content, padding, border e margin em pixels reais.

Critério para avançar

Você avança se: sabe por que 100px + padding pode virar 142px; aplica border-box no cartaz do exemplo; muda só o padding e prevê o resultado antes de recarregar.

Atividades

1. Com content-box, width: 200px, padding: 20px e border: 10px solid, qual é a largura total da borda externa?
2. O que muda se a mesma regra usar box-sizing: border-box?
3. Padding e margin: qual dos dois mostra o fundo do elemento?

Respostas comentadas

1. 200 + 40 (padding dos dois lados) + 20 (borda dos dois lados) = 260px.
2. A borda externa fica em 200px; padding e borda comem espaço de dentro da content box.
3. O padding. A margem fica fora da borda e o fundo do elemento não a preenche.