Diferenca entre margin e padding

Se você é como eu e vive xeretando o código do seu template, com certeza se depara com determinados valores que podem deixá-lo confuso. À princípio a diferença entre margin e padding me confundiu um pouco, por isso vou explicar para vocês o resultado de um e outro:

Margin determina a distância de um elemento para outro no template, por exemplo, a distância entre uma coluna e outra. Padding dá um espaço entre o conteúdo deste elemento para as bordas.

Visualmente para que se compreenda bem, veja na imagem1 a coluna do post, que está envolvida por uma borda vermelha. Esta coluna tem margin-left: 10px, ou seja, um espaçamento de 10 px entre o seu limite à esquerda e o limite da outer-wrapper (que é o 'corpo' do template). Já o texto em sí, que é o conteúdo do elemento main-wrapper (ou a coluna do post), está com margin e padding 0px e o resultado é que o texto fica colado nas bordas da coluna:



Aqui eu coloquei uma borda preta em torno do texto para que se visualize melhor:



Para arrumar esta distância entre o post e os limites da coluna, procure por:

.post {
margin: 0px;
border: 1px solid #000000;
}

Agora vou aplicar uma margin: 10px no post, ficando assim:



Agora vou acrescentar um padding: 15px;



Vejam como texto se afatou das bordas pretas.

Neste caso, você pode, por exemplo, estabelecer uma cor para a coluna e outra para o post, o que torna de grande importância o uso de padding.



Agora, quando você for xeretar o código do seu template e encontrar, junto a propriedade 'margin', padding, já sabe o que é e prá que serve.