Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    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.

    0 Deixe um Comentário:

    Postar um comentário