Usando margin

 Fala aí gente, aqui é o Anon e hoje venho trazendo mais um tutorial pra vocês! No tutorial de  hoje estarei ensinando a como vocês usarem a propriedade CSS "margin", vamos la!
 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":



margin-top /--margem de cima--/

margin-right /--margem direita--/

margin-bottom /--margem de baixo--/

margin-left /--margem da esquerda--/

 Sucintamente, todos esses margins podem ficar da seguinte forma:

margin:0 0 0 0;

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 zeroo 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-top:XXpx; /--para empurrá-lo para baixo--/
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:

margin:XXpx 0 0 XXpx;

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:

margin-top:-XXpx;

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-left o float deve ser float:$tartSide; (o mesmo que float:left;)
 Para margin-right o gloat deve ser float:$endSide; (o mesmo que float:right;)

 Bem, por hoje é só, nesse tutorial tem todas as devidas explicações sobre margin, eu só expliquei 2 deles, mas as dicas dadas aqui se aplicam a todos.

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina.