Box-Sizing: Content-Box vs Border-Box
Compreenda como box-sizing altera a inclusão de padding e border nos cálculos de largura e altura.
Box-Sizing: Content-Box vs Border-Box é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O problema do dimensionamento da caixa
Por padrão, o CSS define width apenas na área de conteúdo. Adicionar preenchimento interno ou borda aumenta o tamanho real renderizado do elemento, o que é confuso e propenso a erros.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Padrão)
box-sizing: content-box é o padrão. width e height se aplicam apenas ao conteúdo. O preenchimento e a borda são adicionados além dele, fazendo o elemento ultrapassar o tamanho definido.
border-box
Com box-sizing: border-box, width e height incluem conteúdo + preenchimento + borda. O elemento permanece exatamente no tamanho declarado, independentemente do preenchimento ou da borda.
<div class="box">Exactly 200px rendered width</div>
A redefinição universal para border-box
Aplique border-box globalmente usando a redefinição universal recomendada:
<div class="demo-box">Width stays exactly 200px</div>
Por que usar inherit em vez de *
Um padrão alternativo permite que os componentes substituam box-sizing quando necessário:
<div class="demo-box">Inherited border-box sizing</div>
Largura percentual + preenchimento
O principal benefício prático de border-box aparece com larguras percentuais. Um elemento com width: 50% e preenchimento de 20px permanece exatamente com 50% da largura do elemento pai, sem transbordar.
<div class="col">50% wide column with padding, no overflow</div>
border-box não inclui margin
Mesmo com border-box, margin não é incluída na largura declarada. As margens sempre adicionam espaço fora do elemento, além das dimensões definidas.
História: por que content-box é o padrão
Historicamente, os navegadores divergiam quanto ao modelo de caixa. A W3C padronizou content-box, mas IE usava border-box. O CSS moderno usa content-box por padrão para cumprir a especificação da W3C, mas praticamente todos os projetos o substituem por border-box.
Inspecionando o modelo de caixa no DevTools
No Chrome DevTools, o painel Elements mostra um diagrama do modelo de caixa com as dimensões exatas do conteúdo, do preenchimento, da borda e da margem. Essa é a maneira mais rápida de depurar problemas de dimensionamento.
Grid e Flexbox usam border-box internamente
CSS Grid e Flexbox sempre dimensionam trilhas e itens usando a semântica de border-box, independentemente da configuração de box-sizing do próprio elemento. Isso mantém previsíveis os cálculos de dimensionamento.
min/max com border-box
min-width, max-width, min-height e max-height funcionam da mesma maneira que width: incluem o preenchimento e a borda quando border-box está ativo.
Verificação rápida
Com box-sizing: border-box, um elemento declarado como width: 300px; padding: 30px; tem uma largura da área de conteúdo de:
Recapitulação
box-sizing: border-box inclui o preenchimento e a borda na largura declarada, evitando o crescimento inesperado do tamanho. Aplique-o globalmente com *, *::before, *::after { box-sizing: border-box }. As margens nunca são incluídas em nenhum dos modelos de caixa.
Perguntas Frequentes
A aula “Box-Sizing: Content-Box vs Border-Box” é grátis?
Sim — o texto completo de “Box-Sizing: Content-Box vs Border-Box” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Box-Sizing: Content-Box vs Border-Box”?
Compreenda como box-sizing altera a inclusão de padding e border nos cálculos de largura e altura. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Box-Sizing: Content-Box vs Border-Box”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Compreendendo Largura, Altura, Margem e Preenchimento
- Estilos, Largura e Cor das Bordas
- Box-Sizing: Content-Box vs Border-Box
- Contorno e Sombra da Caixa