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":
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 zeroo representa margin-right, o terceiro zero representa margin-bottom e o quarto zero representa margin-left.
"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:
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:
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:
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.
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