Primeiramente, pra que serve o margin? Margin é uma das propriedades usadas para definir o posicionamento de determinado objeto dentro de um template. O margin é "dividido" em quatro "posicões":
Posições
margin-right /--margem direita--/
margin-bottom /--margem de baixo--/
margin-left /--margem da esquerda--/
Sucintamente, todos esses margins podem ficar da seguinte forma:
Nota
Nesta forma, os zeros podem ser observados como o funcionamento de um relógio, ou seja, no sentido horário.Onde, o primeiro zero representa margin-top, o segundo zero representa margin-right, o terceiro zero representa margin-bottom e o quarto zero representa margin-left.
Exemplificando
Eu tenho um elemento que tem de ser posicionado em um template, onde meu objetivo é descê-lo e "empurra-lo" para a direita, portanto, eu tenho de usar os margins das direções oposta das minhas, ficando:margin-left:XXpx; /--para empurrá-lo para a direita--/
"XX" são apenas letrar representativas e "px" é a unidade de medida que costumo utilizar(existem outras também, tais como: %, cm e em).
Da forma resumida:
Exemplo 2
Eu tenho que subir determinado elemento, dessa vez não vamos usar o margin "oposto", iremos usar o margin-top. Você deve ter se perguntado: _Mas e se o margin-top já estiver no número 0 e eu não consegui o posicionar onde queria?Bem, é simples, é só usarmos números negativos:
Quando usar margin-left ou right
Bem, essa era uma das minhas dúvidas a algum tempo. O que define em um template o qual margin (direito ou esquerdo) iremos usar, é o float. Exemplos:Para margin-right o gloat deve ser float:$endSide; (o mesmo que float:right;)