Margin e Padding são propriedades de organização, ou seja, elas adicionam ''espaços em branco" entre os elementos HTML, fazendo com que eles não fiquem ''grudados''. O motivo de eu estar escrevendo este post é porque muitas pessoas confundem as duas e na hora de fazer as alterações no HTML ficam ''testando'' ambas para ver qual delas vai alterar a area desejada. Neste tutorial você entenderá como funciona cada uma delas e aprendera a usa-las corretamente.

• Descrição de Padding

 A propriedade ''Padding'' determina as margens internas, ou seja, ela determina a distancia do conteúdo ao objeto externo, ou melhor, o quanto um conteúdo está recuado dentro de um objeto externo. Exemplo: Perceba que na imagem abaixo, o conteúdo da postagem fica limitado ao fundo branco, isso acontece pois a propriedade ''padding'' está sendo aplicada fazendo com que ele não ''vaze'' para fora da area branca.

• Descrição de Margin

A propriedade margin determina a distancia de um elemento para o outro, tenha como exemplo a imagem abaixo, que mostra o menu de nosso site. Esse menu está no local correto devido a propriedade margin, que define e determina o local e a distancia de cada objeto, abaixo explicaremos como usa-la.

O ultimo parágrafo explica como utilizar a propriedade margin para organizar este menu.

• Utilizando as propriedades magin e padding

Geralmente essas propriedades são utilizadas da seguinte forma nos html dos blogs e sites:
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; 
Cada um desses valores correspondem a distância de determinados elementos e seguem o sentido horario, ou seja, se você alterar o primeiro 0 você estará aumentando a distancia do topo, o segundo zero a distancia da direita, terceiro para baixo e quarto da esquerda.

•      Um exemplo usando a imagem que utilizei na ''Descrição de Margin'' - Se eu entrar no html do meu blog e modificar o primeiro zero da tag margin equivalente ao menu eu estarei colocando esse menu mais para baixo, pois estará aumentando a distancia do menu do topo do blog. Se eu modificar o ultimo zero da tag magin, esse menu se arrastará mais para o centro do blog, pois estarei aumentando a distancia do menu à lateral esquerda do site.