Boa noite, Júlio! Tudo certo, cara? =)
Temos várias formas de informar os valores das margens de um elemento...
A primeira e mais fácil de todas é quando optamos por passar apenas um valor, por exemplo:
div {
margin: 10px;
}
Nesse caso, todas os elementos <div>
teriam 10px de espaçamento em todos os quatro lados - cima, direita, baixo e esquerda.
Entretanto, podemos passar também dois valores, assim:
div {
margin: 10px 20px;
}
Nesse caso, estamos definindo quais são as margens vertical e horizontal, ou seja, a <div>
agora terá 10px de espaçamento na vertical - em cima e abaixo - e 20px nas laterais esquerda e direita.
Podemos ir mais além ainda e passar 3 valores!
div {
margin: 10px 20px 30px;
}
Quando fazemos isso, estamos informando quais os valores das margens do topo, das laterias e abaixo, respectivamente... Mas passamos só três valores, como é possível?
O primeiro valor (10px) será aplicado acima do elemento. O segundo, para ambos os lados (direita e esquerda). Já o último, será utilizado para definir o valor da margem inferior.
Uma outra forma de definir é informando os quatro valores!
div {
margin: 10px 20px 30px 40px;
}
Nesse caso, a <div>
terá 10px acima, 20px à direita, 30px para baixo e 40px à esquerda! Repare que os valores são aplicados em sentido horário, começando do topo!
Repare que eu lhe mostrei quatro formas de fazer isso! Se quiséssemos, poderíamos escrever de forma mais explícita ainda, assim:
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
Repare que o resultado será o mesmo do último caso!! =)
Espero ter ajudado,
Fábio