O modelo de caixa

Dê a uma caixa width: 200px, 16px de padding e uma borda de 2px, e por padrão ela ocupa 236 pixels na tela, não 200.

Todo elemento é uma caixa

Para montar o layout de uma página, o navegador transforma cada elemento num retângulo. Cada caixa tem quatro camadas, de dentro para fora. A área de conteúdo guarda o texto ou a imagem. O padding é o espaço dentro da caixa, entre o conteúdo e a borda, e recebe a cor de fundo da caixa. A borda é uma linha em volta do padding. A margem é o espaço fora da borda que afasta as outras caixas; ela é sempre transparente. As ferramentas de desenvolvedor do navegador desenham exatamente este diagrama quando você inspeciona um elemento, com os números preenchidos.

Atalho para os quatro lados

padding, margin e border-width aceitam de um a quatro valores, em sentido horário a partir do topo. padding: 16px define os quatro lados. padding: 8px 16px define em cima e embaixo como 8 e esquerda e direita como 16. padding: 4px 8px 12px 16px define em cima, direita, embaixo e esquerda, nessa ordem. Cada lado também pode ser definido sozinho, como em margin-top. border: 2px solid #333 define largura, estilo e cor de uma vez; sem um estilo como solid ou dashed, nenhuma borda é desenhada.

box-sizing: a configuração que quase todo mundo muda

Por padrão, width e height definem só o tamanho da área de conteúdo, e padding e borda são somados por fora. Esse é o modelo content-box, e ele complica os layouts: duas caixas de width: 50% com qualquer padding já não cabem lado a lado. Com box-sizing: border-box, a largura inclui o padding e a borda, e a área de conteúdo encolhe para dar espaço. Muitas folhas de estilo começam aplicando isso a todos os elementos com *, *::before, *::after { box-sizing: border-box; }.

Caixas de bloco e inline

As caixas se comportam de modo diferente conforme o valor de display. Caixas de bloco, como p, h1 e section, começam numa linha nova e se esticam para preencher a largura do contêiner. Caixas inline, como a, strong e span, ficam dentro de uma linha de texto; width e height não valem para elas, e o padding e a margem verticais delas não afastam as outras linhas. display: inline-block fica no meio: a caixa corre dentro da linha como uma palavra, mas respeita largura, altura e padding, o que serve bem para etiquetas pequenas e botões.

Margens que colapsam

Uma regra surpreende quase todo mundo. Quando a margem de baixo de um bloco encontra a margem de cima do seguinte, elas não se somam; vence a maior. Um parágrafo com margin-bottom: 20px seguido de um título com margin-top: 30px fica a 30 pixels de distância, não 50. Isso se chama colapso de margens, e só acontece com margens verticais entre blocos no fluxo normal, não dentro de contêineres flex ou grid. Para centralizar um bloco na horizontal, dê a ele um width ou max-width e margin: 0 auto: as duas margens laterais automáticas dividem o espaço livre igualmente.