O conceito que explica TODO o espaçamento
No CSS, todo elemento é uma caixa retangular — mesmo um texto simples. E toda caixa tem 4 camadas, de dentro para fora:
- conteúdo — o texto ou imagem
- padding — o respiro interno (entre o conteúdo e a borda)
- border — a borda
- margin — o espaço externo (entre esta caixa e as vizinhas)
🧠 Modelo mental — um quadro na parede: o conteúdo é a foto; o padding é o paspatur (a margem branca dentro do quadro); a border é a moldura; a margin é a distância até o próximo quadro na parede.
Entender essas 4 camadas resolve 90% das dúvidas de "por que tem esse espaço aqui?".
