Diferença entre Margin e Padding 7.6.12 Ulquioorraa

Hoje vou posta um entendimento básico sobre a diferença entre Margin e Padding, que são propriedades que nos permite adicionar espaço em branco entre os elementos HTML, evitando que os elementos fiquem "grudados".
Embora ambas possuirem funções semelhantes, cada uma possui sua particularidade.

Padding: determina as margens internas, é responsável por determinar a distância entre o conteúdo de determinado elemento e sua borda.
Margin: determina a distância de um elemento para outro. 

Utilizando margin e padding, você deve informar cada valor estabelecido nos quatro cantos, sendo eles: topo, direita, abaixo, esquerda. Cada valor declarado deve se referir a cada lado do elemento HTML.
O primeiro valor é para o topo , e eles seguem um sentido horário, portanto, o próximo valor seria para a direita, depois para baixo e por último à esquerda.

Ex.1: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).

Se você definir um valor único, a distância aplica-se a todos os lados, ela será aplicada aos 4 lados do elemento HTML.

Ex.2:
margin: 5px;
padding: 8px;

Padding: é o número de pontos em que o conteúdo está recuado dentro do objeto externo.

Margin: determina a distância de um elemento para outro. Podemos utilizar a propriedade margin para arrumar a distância entre o post e os limites da coluna da postagem.

Ou seja, ao usar uma margin estamos definindo um espaço entre uma camada e as camadas texto, imagens ou outros conteúdos que tiver aos lados.
Ao estipular um padding em uma camada, por exemplo, estamos definindo o espaço  
que há entre a borda da camada e o que estiver dentro.