O formato de elementos padrões no CSS são retângulos (vou chamar de box aqui).
Vamos dar uma olhada nessas boxes com seus limites a mostra (em vermelho).
As duas tem os valores das suas propriedades com 20px, mas a primeira usa como propriedade o padding e a segunda usa a margin. Dá só uma olhada:
Vamos começar com o padding:
A parte azul é espaço entre o limite do box e o real conteudo dele, o e essa parte azul é criada pelo valor que você define com o padding. Por tanto,
Padding é a distância entre o conteúdo de um box e seus limites.A gente vê que o width e o height são os mesmos, mas eles tem tamanhos direfentes.
Isso acontece porque...
Essa propriedade inclui o padding e a borda do elemento no seu tamanho. Seria uma formula assim:
TamanhoTotal = Padding + BorderSize + Tamanho
Agora a gente pode ver que a parte azul está como se fosse uma "borda" e isso é a margin. Você pode ver que é o margin que distancia o nosso elemento de margin dos elementos de exemplo. Ou seja ...
Margin é o espaço do elemento para outros elementos.