CSS: Modelo de Caixa CSS

Última atualização: 2026-10-13

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

Propriedade	Valores Comuns	Finalidade
`width`	`300px`, `50%`, `auto`	Largura da área de conteúdo
`height`	`200px`, `auto`	Altura da área de conteúdo
`padding`	`20px`, `10px 20px`, `10px 20px 15px 5px`	Espaçamento interno (conteúdo até borda)
`border`	`2px solid #333`	Borda (largura + estilo + cor)
`margin`	`10px`, `20px auto`, `0 auto`	Espaçamento externo (elemento até outros elementos)
`box-sizing`	`content-box` (padrão), `border-box`	Escopo de cálculo largura/altura

Propriedades nesta seção: width height padding border margin box-sizing

1. Quatro Partes do Modelo de Caixa

De dentro para fora:

TEXT

┌────────────────────────────────────┐  ← 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

▶ Experimente

(3) Borda

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

▶ Exemplo

▶ Experimente

(4) Margem

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

▶ Exemplo

▶ Experimente

💡 Nota: As margens superior e inferior de elementos de nível bloco "colapsam" (pegam o valor máximo em vez de somar). As margens esquerda e direita não colapsam.

2. 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):

TEXT

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

▶ Experimente

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.

3. Propriedade box-sizing

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

(1) 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."

(2) 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

▶ Experimente

💡 Comparação: No modo content-box, elementos filhos transbordam o pai; no modo border-box, elementos filhos encaixam perfeitamente. É por isso que projetos modernos recomendam definir globalmente box-sizing: border-box.

(3) Configuração Global de border-box

Muitos projetos definem isso globalmente em seu reset:

▶ Exemplo

▶ Experimente

4. Depurando o Modelo de Caixa

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

💡 Dica de depuração: Pressione F12 para abrir as Ferramentas do Desenvolvedor, depois na aba Computado do painel Elementos, você pode ver visualmente o conteúdo, preenchimento, borda e margem de cada elemento — esta é a maneira mais rápida de diagnosticar problemas de layout.

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

5. 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

Propriedades nesta seção: width height padding border margin box-sizing

❓ Perguntas Frequentes

P Devo usar content-box ou border-box?

R A maioria dos projetos escolhe border-box. Com border-box, padding e borda não expandem as dimensões do elemento, tornando os cálculos de layout mais intuitivos. Muitos frameworks (Bootstrap, Tailwind) definem globalmente border-box. A menos que tenha necessidades especiais, não use o padrão content-box.

P Como vejo o modelo de caixa no navegador?

R Pressione F12 para abrir as Ferramentas do Desenvolvedor, selecione um elemento no painel Elementos, e o painel Computado ou Estilos à direita mostrará a estrutura de quatro camadas do modelo de caixa (conteúdo/preenchimento/borda/margem). Esta é a maneira mais rápida de diagnosticar problemas de layout — fortemente recomendado fazer disso um hábito.

P Tanto margin quanto padding criam espaçamento — quando devo usar qual?

R Lembre-se de um princípio: a cor de fundo deve cobrir esta área? Com padding, o fundo cobre; com margem, não cobre. Simplesmente: espaçamento dentro de um elemento usa padding; espaçamento entre elementos usa margem.

📖 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

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.
Copie a caixa acima, adicione box-sizing: border-box, observe mudanças no tamanho real, e compare com o exercício anterior.

Intermediário

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).
Use border-box para criar um "layout de duas colunas com 50% de largura cada e 20px de espaço entre elas."

Desafio

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
Crie um layout de formulário usando cálculos do modelo de caixa para alinhar perfeitamente campos de entrada e botões.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós