Propriedade Box-Sizing
Última atualização: 2026-09-13
box-sizing Propriedade Box-Sizing
A propriedade box-sizing determina como width e height são calculados e é a chave para entender o modelo de caixa do CSS. O valor padrão, content-box, dimensiona apenas a área de conteúdo, com padding e border adicionados por cima; border-box inclui padding e border dentro da largura e altura especificadas, o que é mais intuitivo. Projetos modernos comumente definem border-box globalmente.
| Categoria | |
|---|---|
| Valor Inicial | content-box |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
box-sizing: content-box | border-box;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
content-box | Palavra-chave | Width/height incluem apenas a área de conteúdo (padrão). |
border-box | Palavra-chave | Width/height incluem conteúdo, padding e border. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-sizing | ✓ v10 | ✓ v12 | ✓ v29 | ✓ v5.1 | ✓ v7 |
| Suportado em todos os principais navegadores | |||||
Dica： Recomenda-se definir *{box-sizing:border-box} globalmente para que todos os elementos tenham tamanho consistente, evitando surpresas de layout.
❓ Perguntas Frequentes
QQual é a diferença entre content-box e border-box?
ACom content-box, o padrão, o width refere-se apenas à área de conteúdo e padding e border são adicionados fora dela, então você tem que fazer a conta. Com border-box, o width já inclui padding e border, então a largura que você define é a largura visível final e o conteúdo encolhe para dentro. border-box é mais intuitivo, e é por isso que projetos modernos o habilitam globalmente para todos os elementos.
QPor que todos recomendam border-box?
Aborder-box torna a matemática de layout simples: width:200px é o espaço real que o elemento ocupa, e padding e border espremem para dentro em vez de alargar a caixa e atrapalhar o layout. Isso é especialmente valioso para layouts responsivos que combinam larguras em porcentagem com padding fixo, pois evita transbordamento. É por isso que o reset global *{box-sizing:border-box} é tão recomendado por frameworks e em quase todo reset CSS moderno.
QComo defino todos os elementos como border-box globalmente?
AAdicione isto no topo do seu CSS: *, *::before, *::after { box-sizing:border-box; }, aplicando border-box a todos os elementos e pseudo-elementos. Uma ressalva: se um componente de terceiros, como um controle de formulário, depende do comportamento padrão content-box, a substituição global pode mudar como ele é renderizado, então volte esses componentes específicos para content-box se necessário. Esse reset de uma linha elimina toda uma classe de bugs de layout.
QQuais elementos são border-box por padrão?
ANa maioria dos navegadores, alguns controles de formulário, incluindo input, textarea, select e button, são border-box por padrão, então a altura de um input já inclui sua borda. Tudo o mais é content-box por padrão. Os navegadores historicamente discordaram do box-sizing padrão dos controles de formulário, e é exatamente por isso que as estruturas de UI normalizam o box-sizing em seus estilos de reset; assumir content-box em todo lugar é o modelo mental mais seguro até você sobrepor.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
