Box model

Todo elemento é uma caixa com conteúdo, padding, borda e margem, nessa ordem, de dentro pra fora.

Também aparece como "modelo de caixa", "padding", "margin", "border", "box-sizing".

No mundo do Design

O Figma chama isso de Padding e stroke do frame

Toda coisa numa página é uma caixa retangular, mesmo quando parece redonda. A caixa tem quatro camadas, de dentro pra fora:

conteúdo: o texto ou a imagem
padding: o respiro interno, entre o conteúdo e a borda. É o padding do auto layout
border: a linha da borda. É o stroke do Figma
margin: o espaço externo, empurrando os vizinhos pra longe. O Figma não tem equivalente direto

.cartao {
  padding: 24px;
  border: 1px solid #dde0e3;
  margin-bottom: 16px;
}

A pegadinha do box-sizing

Por padrão, o CSS antigo somava padding e borda por fora da largura declarada. Você pedia 300px, colocava 24px de padding e recebia 348px. Todo projeto moderno começa desligando isso:

* {
  box-sizing: border-box;
}

Com border-box, largura é largura, padding incluído. É assim que o Figma se comporta, então essa linha só faz o CSS parar de te surpreender.

Margem no lugar de gap

Se você vem do auto layout, use gap em vez de margem sempre que der. Margem entre irmãos é o jeito antigo e cria aqueles espaços que ninguém sabe de onde vêm.

Outros termos de CSS

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.