Curso de CSS - Propriedade Margin

Agora que já sabemos a utilizar propriedades, mudar o valor das mesmas e adicionar novos valores, podemos aprender conceitos mais avançados do CSS como a propriedade "margin". A propriedade "margin", assim como o nome sugere, adiciona margens envolta de elementos no CSS (elementos bloco). Não é difícil utilizar esta propriedade porém é preciso saber como esta propriedade funciona e em quais elementos ela pode ser aplicada.

Propriedade Margin: margem em elementos

Como já disse anteriormente, a propriedade margin pode ser difícil de ser entendida. Esta propriedade e muito utilizada em div's para alinhar e posicionar corretamente suas divisórias no layout de um site. O problema em usar esta propriedade vem quando confundimos ela com outra propriedade parecida, que se chama "padding". A propriedade padding, que veremos futuramente no curso, também adiciona um espaçamento no elemento - contudo, esta propriedade se diferencia da "margin" em muitos aspectos.
Para entender melhor como a propriedade margin funciona, veja abaixo uma imagem que representa o modelo da caixa no CSS (ou "box model" em inglês). A imagem abaixo irá te dar uma idea de como algumas tags que envolvem div's e outros elementos com propriedades parecidas (por exemplo a propriedade border - borda). Veja a imagem abaixo:

Repare que a propriedade margin não irá aumentar o tamanho do elemento pois ela apenas adicionará o espaço do lado de fora do elemento.

Vídeo aula - Aplicando margens com o CSS

Download dos arquivos:

Clique Aqui para fazer o download dos arquivos usados nesta vídeo aula.

Tipos de valores na propriedade Margin:

Quando você indica apenas um único valor na propriedade margin, este valor será aplicado em todos os lados do elemento. Veja o exemplo abaixo:

#myDiv{
 margin: 10px;
}

Quando você quiser colocar valores diferentes em cada lado, você pode adicionar quatro valores diferentes (separados por um espaço). Isto indicará o valor de cada lado, no sentido horário, começando pelo topo. Veja o exemplo abaixo:

#myDiv{
 margin: 10px 0px 0px 5px;
} 

Quando você quiser deixar pares de valores iguais, topo e o lado inferior, esquerda e direita, você pode indicar apenas dois valores - o primeiro valor será o valor vertical, e o segundo será o valor horizontal. Veja o exemplo abaixo:

#myDiv{
 margin: 10px 15px;
}

Sub-propriedades da "Margin":

Embora a propriedade margin te dá o mesmo efeito, e possível utilizar sub propriedades desta propriedade para declarar somente valores de um lado específico. Para fazer isto é fácil, somente coloque "margin-x" onde x pode ser top (topo), right (direita), bottom (parte inferior) e left (esquerda). Veja um exemplo abaixo:

#myDiv{
 margin-left: 50px;
} 

Este tutorial fica por aqui. Se você possui alguma dúvida, deixe um comentário abaixo que irei responder a sua pergunta.