Pinceladas da Web

A propriedade margem declara a margem entre um elemento do HTML e os elementos em torno dela. A propriedade margem pode ser ajustada para o alto, direita, abaixo e a esquerda:

margin-top: valor definido pelo usuário ou auto;
margin-right: valor definido pelo usuário ou auto;
margin-bottom: valor definido pelo usuário ou auto;
margin-left: valor definido pelo usuário ou auto;

Você tem a escolha de 3 valores para a propriedade margem, que são as seguintes:

• Comprimento: em pixels
• Porcentagem
• Auto

É possível declarar todos os valores para margem em uma única propriedade:

margin:15px 15px 15px 15px;

A ordem da declaração acima fica da seguinte forma:

• Top: Alto
• Right: Direita
• Bottom: Abaixo
• Left: Esquerda

Se apenas um valor for declarado, ele é ajustado para todas as margens:

margin: 15px;

Você pode também declarar 2 ou 3 valores, onde:

margin: 15px 15px;

O primeiro valor é para a margem de cima e baixo, e o segundo valor é para a margem esquerda e direita, ou:

margin: 15px 15px 15px;

O primeiro valor é para a margem do topo, o segundo para as margens esquerda e direita e o terceiro para a margem de baixo. A propriedade margin também aceita valores negativos, como você pode ver abaixo:

margin: -15px;

Os elementos como parágrafo tem margens por defeito em alguns browsers, para corrigir esse erro, é só definir a margem como 0:

p { margin: 0; }

Quando você for declarar valores iguais a 0 para margens, não é necessário declarar 0px, só é necessário declarar 0.

Tradução do artigo original de: CSS Basics.