box-sizing
Duas caixas com a mesma largura declarada podem terminar com tamanhos finais diferentes. Um detalhe que confunde até quem já tem alguma experiência.
Estudar esta lição interativa →Aqui está uma pegadinha clássica do CSS: por padrão, quando você declara width: 200px, essa medida vale só para o conteúdo. O padding e o border são somados por cima, então a caixa final acaba mais larga do que os 200px que você pediu. Isso se chama box-sizing: content-box, o comportamento padrão do CSS.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. As duas caixas pedem width:200px, mas só a segunda (border-box) realmente fica com 200px de largura final.
A alternativa, box-sizing: border-box, muda a conta: agora o width declarado já inclui padding e border dentro dele, então a caixa final fica exatamente do tamanho pedido. É por isso que praticamente todo projeto profissional de CSS começa com uma regra global aplicando border-box a tudo, é previsível, e evita boa parte das surpresas de "por que meu layout está estourando?".
* { box-sizing: border-box; } no topo do CSS aplica border-box a todos os elementos da página de uma vez. É tão comum que você vai ver essa linha em praticamente qualquer projeto real que inspecionar.
Duas colunas de width: 50% cada, que deveriam ficar lado a lado, "quebram" e uma cai para a linha de baixo assim que você adiciona padding ou border a elas. A causa quase sempre é content-box somando espaço extra além dos 50%. Adicionar box-sizing: border-box resolve na maioria dos casos.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione box-sizing: border-box no seletor *.