Dentro x fora

Os dois espaçamentos mais usados — e os mais confundidos:

• padding — espaço DENTRO da caixa (empurra o conteúdo para longe da borda)
• margin — espaço FORA da caixa (afasta a caixa das vizinhas)

.card {
  padding: 16px;  /* respiro interno */
  margin: 24px;   /* distância das outras caixas */
}

Atalho: padding: 10px 20px = 10px em cima/baixo, 20px nas laterais.

🧠 Truque para nunca mais confundir: padding = Por dentro. Se o fundo/borda cresce junto com o espaço, é padding. Se o espaço é "vazio" empurrando os vizinhos, é margin.