Modelo de Caixa CSS

O Modelo de Caixa é a base do layout CSS. No mundo CSS, cada elemento HTML é tratado como uma "caixa" retangular composta por área de conteúdo, preenchimento, borda e margem.

Referência Rápida de Propriedades do Modelo de Caixa

Quatro Partes do Modelo de Caixa

De dentro para fora:

┌─────────────────────────────────────┐  ← Margem
│  ┌───────────────────────────────┐  │  ← Borda
│  │  ┌─────────────────────────┐  │  │  ← Preenchimento
│  │  │                         │  │  │
│  │  │     Área de Conteúdo    │  │  │
│  │  │                         │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

1. Área de Conteúdo

A área onde o conteúdo real reside, como texto e imagens. Largura e altura são controladas pelas propriedades width e height.

2. Preenchimento

O espaço entre a área de conteúdo e a borda, usado para criar espaço em branco entre conteúdo e borda.

Exemplo

<style>
.box {
  padding: 20px;  /* 20px em todos os lados */
  background: #fce4ec;
  border: 2px solid #e91e63;
}
</style>
<div class="box">Este elemento de caixa tem preenchimento criando 20px de espaço entre conteúdo e borda</div>

3. Borda

A linha de borda que envolve o preenchimento e a área de conteúdo.

Exemplo

<style>
.box {
  border: 2px solid #333;
  padding: 16px;
  background: #f9f9f9;
}
</style>
<div class="box">Este elemento de caixa tem uma borda envolvendo o lado de fora do preenchimento</div>

4. Margem

O espaço entre a borda e outros elementos, usado para controlar a distância entre elementos.

Exemplo

<style>
.box {
  margin: 10px;  /* 10px em todos os lados */
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  padding: 10px;
}
</style>
<div class="box">Caixa 1 - tem margem de 10px</div>
<div class="box">Caixa 2 - 20px de distância da Caixa 1</div>
<div class="box">Caixa 3 - 20px de distância da Caixa 2</div>

Tamanho Real do Elemento

Esta é a parte mais confusa — a largura e altura de um elemento não equivalem às dimensões da área de conteúdo.

Por padrão (box-sizing: content-box):

Largura total do elemento = width + padding-left + padding-right + border-left + border-right
Altura total do elemento = height + padding-top + padding-bottom + border-top + border-bottom

Por exemplo:

Exemplo

<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  background: #e3f2fd;
  text-align: center;
  line-height: 1.5;
}
</style>
<div class="box">
  Área de conteúdo 200×100px<br>
  Renderização real 244×144px
</div>

O tamanho real de renderização desta caixa é:

• Largura total = 200 + 20×2 + 2×2 = 244px
• Altura total = 100 + 20×2 + 2×2 = 144px

Se você pensou que esta caixa era apenas 200×100, está errado! Muitos iniciantes tropeçam aqui.

Propriedade box-sizing

Para resolver o problema do "tamanho real maior que o definido", o CSS3 introduziu a propriedade box-sizing.

content-box (padrão)

width e height incluem apenas a área de conteúdo; preenchimento e borda não são incluídos. Este é o padrão e a fonte da "armadilha."

border-box

width e height incluem conteúdo + preenchimento + borda; borda e preenchimento não "expandem" o elemento:

Exemplo: Comparação content-box vs border-box

<style>
.container {
  display: flex;
  justify-content: space-around;
}
.box {
  width: 300px;
  height: 200px;
  border: 10px solid indianred;
}
.item {
  width: 100%;
  background: rgba(49, 115, 187, 0.3);
  border: solid #5B6DCD 10px;
  padding: 15px;
}
.s1 { box-sizing: content-box; }
.s2 { box-sizing: border-box; }
</style>
<div class="container">
  <div class="box">
    <h3>content-box (padrão)</h3>
    <div class="item s1">width: 100% + padding + border = transborda o pai</div>
  </div>
  <div class="box">
    <h3>border-box</h3>
    <div class="item s2">width: 100% inclui padding + border = encaixa perfeitamente</div>
  </div>
</div>

Configuração Global de border-box

Muitos projetos definem isso globalmente em seu reset:

Exemplo

<style>
*, *::before, *::after {
  box-sizing: border-box;
}
</style>
<div class="box-demo">Caixa de demonstração</div>

Depurando o Modelo de Caixa

Use as ferramentas do desenvolvedor do navegador para inspecionar visualmente o modelo de caixa:

1. Clique com o botão direito em um elemento na página, selecione "Inspecionar"
2. Selecione o elemento no painel Elementos
3. Mude para o painel Computado ou Layout
4. Você verá um diagrama do modelo de caixa mostrando valores de conteúdo, preenchimento, borda e margem

Diferenças do Modelo de Caixa Entre Tipos de Elementos

• Elementos de nível bloco: Largura padrão é 100% do contêiner pai; altura determinada pelo conteúdo
• Elementos inline: Não aceitam width e height; padding/margin efetivos apenas horizontalmente
• Elementos inline-block: Podem definir width/height, mas não ocupam uma linha inteira

❓ Perguntas Frequentes

📖 Resumo

• O Modelo de Caixa é o conceito CSS mais fundamental e importante
• Entender a estrutura de quatro camadas de conteúdo, preenchimento, borda e margem — e como box-sizing afeta os cálculos de dimensão — é pré-requisito para escrever layouts confiáveis
• Definir box-sizing: border-box como padrão global no início de um projeto economiza muitos problemas com cálculos de dimensão

📝 Exercícios

Básico

1. Crie uma caixa 200×200 com preenchimento de 30px e borda de 5px solid. Use as ferramentas do desenvolvedor do navegador para verificar as dimensões reais de renderização e verificar a fórmula do modelo de caixa.
2. Copie a caixa acima, adicione box-sizing: border-box, observe mudanças no tamanho real, e compare com o exercício anterior.

Intermediário

3. Crie uma página com duas caixas lado a lado, ajuste suas margens, e observe o fenômeno de "colapso de margem" (as margens superior/inferior de elementos de nível bloco pegam o máximo em vez de somar).
4. Use border-box para criar um "layout de duas colunas com 50% de largura cada e 20px de espaço entre elas."

Desafio

5. Crie um componente de card com:
   • Largura fixa de 300px
   • Preenchimento de 20px
   • Borda 1px solid #ddd
   • Border-radius 8px
   • Use border-box para garantir que a largura total seja sempre 300px
6. Crie um layout de formulário usando cálculos do modelo de caixa para alinhar perfeitamente campos de entrada e botões.