Carregando...

Box Sizing em CSS

Já sabe que o padding e a borda podem tornar uma caixa maior do que o width declarado. box-sizing escolhe a regra dessa conta: width significa «só conteúdo» ou «conteúdo mais padding mais borda»?

Dois modelos num relance

📊 content-box vs border-box

Modelo O que width / height cobrem Efeito do dia a dia
content-box (predefinição) Só conteúdo Padding e borda somam-se fora do tamanho declarado
border-box Conteúdo + padding + borda O tamanho declarado é a aresta exterior da borda; o conteúdo encolhe
Margin Não incluído em nenhum O espaço exterior continua separado do box-sizing

Predefinição: content-box

Com o modelo predefinido, width: 200px mede o conteúdo. Adicione padding e borda, e a caixa pintada cresce.

Content-box (predefinição)

css
CSS Code 
.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* Conteúdo 200px + padding + borda → total mais largo */

Passe para border-box

Com border-box, o mesmo width: 200px inclui padding e borda. A aresta exterior fica mais perto de 200px; a área de conteúdo fica menor.

Dimensionamento border-box

css
CSS Code 
.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* A caixa de borda exterior aponta para 200px; o conteúdo encolhe */

Mesmos números, pegada diferente

Coloque os dois modelos lado a lado com a mesma largura, padding e borda.

Comparar os dois modelos

css
CSS Code 
.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}

.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Mesmas declarações; .contenty ocupa mais espaço horizontal */

Porque as equipas gostam de border-box

Quando um cartão deve preencher exatamente uma coluna — por exemplo width: 100% com padding — o border-box evita que o cartão transborde do pai.

Cartão amigo da coluna

css
CSS Code 
.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}

Um hábito global calmo

Muitas folhas de estilo definem border-box uma vez para tudo, para a conta diária de larguras ficar previsível. O margin continua fora.

Hábito universal border-box

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

Experimente você

  1. Construa .panel-content com width: 200px, padding e borda sob content-box.
  2. Copie como .panel-border com box-sizing: border-box — veja o tamanho exterior aproximar-se de 200px.
  3. Coloque .contenty e .borderish lado a lado com os mesmos números.
  4. Faça um cartão width: 100% com padding; alterne box-sizing e veja qual transborda.
  5. Experimente o hábito universal * numa página demo pequena.

Erros comuns

  • Pensar que border-box inclui também o margin (não inclui)
  • Esquecer que a predefinição é content-box até a alterar
  • Esperar que o outline siga o box-sizing (o outline fica fora e continua sem ocupar espaço de layout)
  • Declarar width: 100% com padding pesado sob content-box e surpreender-se com o transbordo
  • Misturar percentagens sem saber que modelo de dimensionamento está ativo

Resumo

  • Por predefinição box-sizing: content-box mede o conteúdo; padding e borda somam-se
  • border-box mantém padding e borda dentro da largura/altura declarada
  • O margin fica fora de ambos os modelos
  • Border-box muitas vezes facilita larguras de coluna e cartões width: 100%
  • Um reset universal border-box é um hábito comum e calmo

🧠 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