CSS3: Margin e Padding

Margin: Essa propriedade é aplicada automáticamente nos elementos html ou inseridas pelo desenvolvedor. Por padrão cada elemento html tem um valor próprio (valor inicial) e esse valor pode sofrer pequenas variações de navegador para navegador, por isso é recomendável utilizar algo como um CSS reset para ter valores de margem e de outras propriedades com poucas ou mesmo nenhuma diferença na visualização de browser para browser.

A propriedade margin aplica um espaço EXTERNO ao box (formação visual resultante de um elemento html) afastando-o da margem do browser e ou de qualquer elemento vizinho.

Essa propriedade pode ser declarada conforme exemplos das seguintes formas:

margin: TOPpx RIGHTpx BOTTOMpx LEFTpx; (Inves de exemplificar com valores númericos estou usando as posiçoes que são alteradas pela ordem de declaração) 

margin: TOPeBOTTOMpx LEFTeRIGHTpx;
margin: TODASpx;

Ou ainda pode-se declarar uma única margem em especifico como:
margin-top: px; (Declaração de margem no topo do elemento).

Vale resaltar que as margens podem ser estabelecidas não apenas utilizando px mas outras medidas também.

Padding: O padding (preenchimento) a semelhança do margin também tem valores padrão para os elementos html, ou seja, na não declaração pelo desenvolvedor permanecerá o valor padrão (inicial) que o browser determina para aquele elemento. O que difere um padding de um margin é que enquanto o margin determina o espaçamento externo ao elemento o padding determina o espaço interno do box para seus elementos contidos. Se temos uma div com um h1 dentro e aplicamos a essa div um padding de 50px então teremos 50px da borda da div até o box do h1.

Vale resaltar que quando aplicamos uma padding a um elemento esse valor é somado ao seu width e heigth então se o elemento tem 300X300px ao se declarar 50px de padding ele terá agora 400x400px. Para contornar isso, se assim o desenvolvedor desejar, ele poderá utilizar a propriedade e valor "box-sizing: border-box;" isso dirá ao navegador que as medidas do padding devem estar incluídas nas medidas já estabelecidas para largura e altura.

Exemplos de declaração:

padding: TOPpx RIGHTpx BOTTOMpx LEFTpx;
padding: TOPeBOTTOMpx LEFTeRIGHTpx;
padding: TODASpx;

Ou um único padding como:

padding-top: px; (Declaração de preenchimento no topo do elemento).

Assim como nas margens as declarações de padding podem ser feitas com outros tipos de medidas.