Entenda o box model e controle o tamanho dos elementos

Todo elemento renderizado participa do box model, o modelo de caixa do CSS. Entender esse modelo permite responder a uma pergunta comum: por que um card com width: 300px ficou maior do que 300 pixels? Nesta aula, você vai visualizar as camadas, fazer a conta e testar uma configuração mais previsível.

Imagine uma encomenda. O produto é o conteúdo; o plástico de proteção cria um espaço interno; a caixa de papelão forma a borda; e a distância entre essa caixa e as demais encomendas funciona como margem. No CSS, os nomes corretos são content, padding, border e margin. A comparação ajuda a localizar as camadas, mas tem um limite: o navegador calcula cada dimensão segundo regras do layout, e margens verticais podem até colapsar em situações específicas.

Leia a caixa de dentro para fora

Considere esta regra:

.cartao {
  width: 300px;
  padding: 20px;
  border: 4px solid #2563eb;
  margin: 16px;
}

No valor inicial de box-sizing, chamado content-box, width controla somente a área de conteúdo. A largura da borda externa será 300 + 20 + 20 + 4 + 4, ou 348 pixels. A margem não faz parte da caixa visível, mas reserva mais 16 pixels de cada lado no layout. Portanto, o espaço horizontal necessário pode chegar a 380 pixels.

Esse cálculo explica o comportamento técnico: padding adiciona espaço entre conteúdo e borda; border desenha o limite; margin separa o elemento de seus vizinhos. Não use margem para “aumentar o interior” nem padding para afastar duas caixas. Cada camada responde a uma relação diferente.

Faça width incluir padding e borda

Com border-box, a largura declarada inclui conteúdo, padding e borda:

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

.cartao {
  width: 300px;
  padding: 20px;
  border: 4px solid #2563eb;
}

Agora a borda externa ocupa 300 pixels. O navegador reduz a área de conteúdo para acomodar padding e borda dentro desse total. Esse padrão costuma tornar componentes mais previsíveis, principalmente quando width: 100% encontra espaçamento interno. Ele não elimina a necessidade de entender as camadas nem inclui a margem no valor.

Investigue em vez de estimar

As ferramentas de desenvolvimento do navegador mostram um diagrama do box model. Inspecione um elemento e procure a seção de layout ou computed. Você verá valores de conteúdo, padding, borda e margem. Essa leitura é mais confiável do que ajustar números até a página “parecer certa”.

No laboratório, a caixa começa com content-box. A saída abaixo do botão deve mostrar 324 pixels: 260 de conteúdo, 48 de padding e 16 de borda. Ao alternar para border-box, a saída deve mostrar 260 pixels. Se o resultado for outro, confira os valores calculados e o zoom do navegador.

Sua microprática é mudar o padding para 32 pixels e escrever a largura esperada antes de executar. Faça a previsão nos dois modos. Essa pequena conta conecta o conceito ao que o motor de layout realmente renderiza.

Na próxima aula, vamos usar essas camadas de propósito para criar ritmo, contornos e fundos sem empilhar números aleatórios.