Carregando...

Modelo de caixa CSS

Você já conhece bordas, padding, margin e width. Agora coloque tudo em um só mapa. O modelo de caixa CSS diz que cada elemento é um conjunto de camadas aninhadas: conteúdo no centro, depois padding, depois borda, depois margin por fora.

As quatro camadas

Leia a caixa de dentro para fora.

📊 Camadas do modelo de caixa

Camada Onde fica Trabalho do dia a dia
Conteúdo Centro Texto, imagens e filhos vivem aqui; width / height costumam medir isto
Padding Entre conteúdo e borda Almofada interna; o fundo normalmente a preenche
Borda (border) Em volta do padding A aresta desenhada da caixa
Margin Fora da borda Espaço externo que separa esta caixa dos vizinhos

Comece só com o tamanho do conteúdo

Uma largura simples sem padding nem borda mantém a história clara.

Só largura do conteúdo

css
CSS Code 
.box-content {
width: 200px;
background-color: #ccfbf1;
}

Adicione padding — a área pintada cresce

O padding fica dentro da borda. No modelo padrão content-box, o padding é adicionado fora da largura do conteúdo, então a caixa pintada fica mais larga.

Conteúdo mais padding

css
CSS Code 
.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* O conteúdo continua com 200px; o padding soma 20px de cada lado */

Adicione uma borda — outro anel

A borda envolve o padding. Com o sizing padrão, a espessura da borda também soma ao tamanho externo da caixa de borda.

Conteúdo, padding e borda

css
CSS Code 
.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}

Junte as quatro camadas

O margin não pinta o fundo; só empurra os vizinhos para longe.

Receita completa do modelo de caixa

css
CSS Code 
.card {
width: 200px;          /* conteúdo */
padding: 16px;         /* almofada interna */
border: 2px solid #134e4a; /* aresta */
margin: 24px;          /* espaço externo */
background-color: #ecfdf5;
}

Mesma largura, tamanho total diferente

Duas caixas podem partilhar width: 200px e ainda assim parecer muito diferentes quando padding e borda entram na receita.

Comparar simples vs. com padding

css
CSS Code 
.bare {
width: 200px;
background-color: #fef3c7;
}

.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Ambas declaram width 200px; .padded ocupa mais espaço horizontal */

Regra padrão para lembrar

Por padrão (box-sizing: content-box), width e height descrevem a caixa de conteúdo. Padding e borda costumam tornar a caixa visível final maior. Uma lição posterior cobre box-sizing: border-box, que muda essa conta.

Experimente você

  1. Construa .box-content só com width: 200px e um fundo.
  2. Copie, adicione padding: 20px e note a área pintada crescer.
  3. Adicione uma borda grossa e veja de novo o tamanho total.
  4. Adicione margin: 24px e confirme que os vizinhos se afastam sem o fundo preencher esse espaço.
  5. Coloque .bare e .padded lado a lado — mesma largura declarada, pegada diferente.

Erros comuns

  • Pensar que o margin faz parte do preenchimento de fundo (está fora e costuma ser transparente)
  • Declarar width: 200px e esperar que a caixa de borda fique exatamente 200px após padding pesado (não com content-box)
  • Misturar a ordem das camadas (conteúdo → padding → borda → margin)
  • Confundir outline com border (outra ferramenta)
  • Pular para hábitos border-box antes de entender o modelo padrão

Resumo

  • Cada elemento tem camadas de conteúdo, padding, borda e margin
  • O padding fica dentro da borda; o margin fora
  • width/height padrão medem a caixa de conteúdo
  • Padding e borda muitas vezes aumentam o tamanho visível total
  • O margin cria separação externa sem pintar o preenchimento
  • box-sizing (próxima lição especializada) pode mudar a conta da largura

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial