As propriedades margin e padding do CSS

Duas importantes propriedades do CSS, se chamam margin (margem) e padding (preenchimento). São elas que definem os espaçamentos entre os elementos do layout.
A margem é o que separa um elemento de outro e o preenchimento é o espaço entre o conteúdo e a borda desse conteúdo.
Para fazer o controle dos espaços, usamos um código com valores que podem ser em pixels (px), em porcentagem (%) ou em “em”. A palavra “em” vem da tipografia impressa e se refere ao tamanho da letra M maiúscula para uma determinada fonte.
Para este tutorial, vou usar as medidas em px (pixels).
Antes, é importante que vocês saibam o que quer dizer cada valor:

• 0 – estamos dizendo ao navegador que é para usar um espaço padrão
• 0px – estamos dizendo ao navegador para não colocar espaço
• 5px – estamos dizendo ao navegador para colocar 5 pixels de espaço

Vamos ver um exemplo do código para configurar as margens:

margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;

ou, simplicando:

margin: 100px 40px 10px 70px;

O mesmo código se aplica ao preenchimento:

padding-top: 100px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 70px;

Os valores são apenas ilustrativos, onde:

1. top: espaço entre o conteúdo e a parte superior
2. right: espaço entre o conteúdo e a direita
3. bottom: espaço entre o conteúdo e a parte inferior
4. left: espaço entre o conteúdo e o lado esquerdo

A ordem deve sempre ser esta: top, right, bottom e left.
Também podemos usar um código ainda mais simples, quando os valores são iguais para todos os lados:

margin: 3px; ( equivale a 3 px em top, right, bottom e left)
padding: 4px; ( equivale a 5 px em top, right, bottom e left)

Se o valor for o mesmo para as partes superior e inferior e outro para direita e esquerda, usamos:

margin: 3px 5px ( superior e inferior=3px e direita e esquerda=5px)

Agora vou mostrar uma imagem, usado o template do Dicas de Informática

Clique na imagem para ampliar. Veja que o CSS do header (cabeçalho) é:

/* HEADER
----------------------------------------------- */
#header-wrapper {
width:970px;
background:transparent;
border:1px solid transparent;
margin:0;
padding:4px;
}

A margem foi definida em zero e o preenchimento é de 4px em todos os lados.
Na imagem abaixo, vemos o conceito de box model do CSS

Fonte: W3.org

Pode parecer complicado ( e é), mas para modificar templates do Blogger, basta saber o código para controlar os espaços, ir testando valores e ir visualizando até encontrar o efeito desejado. Use um blog de testes e nao tenha medo de errar ;)