Propriedade Margin!

 Olá,eu sou o Daniel e hoje estarei ensinando um tutorial básico para iniciantes em web design,certo!Vamos lá!

Entendendo o que é Margin

 A propriedade Margin é usada para movimentar elementos em uma página e para alinhar Templates e Skins!

Código Basico da Margin

magin:0px 0px 0px 0px;



Observações: Cada zero do código básico desta propriedade corresponde a uma posição. O primeiro é para cima,o segundo para direita,terceiro para baixo e o quarto para esquerda.

Como usar: Para usa-lo basta ir colocando o valor até movimentar o quanto quer!Lembrando que este é o Margin Básico e é totalmente invertido,ou seja,quando você for movimenta-lo para cima e colocar 10px no primeiro zero ele vai para baixo,então para que não aconteça esse "invertimento" devemos utilizar antes do valor o sinal negativo,que é - 


Aviso: Se continuar vendo este post verá que existem outros tipos de usar o Margin.

Margin-Top o Margin do Topo

 O Margin-Top é utilizado para mover elementos somente para cima.Código:

margin-top:-20px;



Observações: Este código só serve para movimentar elementos para cima!Aquele "invertimento" que havia dito anteriormente também ocorre no Margin-Top.


Os Pixeis: O px ao lado dos zeros significa Pixeis...sem essas duas letrinhas o efeito do margin falha,por isso é muito importante usar "Px".


Como usar: para usar basta ir alterando do seu gosto (do mesmo jeito que é para usar o Margin Básico).

Margin-Bottom o margin de Baixo

margin-bottom:-20px;


Observações: Este código só serve para movimentar elementos para baixo!Aquele "invertimento" que havia dito anteriormente também ocorre no Margin-Bottom.

Como usar: para usar basta ir alterando do seu gosto (do mesmo jeito que é para usar o Margin Básico).

Margin-Left o Margin da Esquerda

margin-left:-20px;



Observações: Este código só serve para movimentar elementos para esquerda!Aquele "invertimento" que havia dito anteriormente também ocorre no Margin-Left.


Como usar: para usar basta ir alterando do seu gosto (do mesmo jeito que é para usar o Margin Básico).

Margin-Right o Margin da Direita

Margin-right:-20px; 




Observações: Este código só serve para movimentar elementos para direita!Aquele "invertimento" que havia dito anteriormente também ocorre no Margin-Left.


Como usar: para usar basta ir alterando do seu gosto (do mesmo jeito que é para usar o Margin Básico).

Pixels

Margin-top:-20px;


Observações: Os Pixels (Px) são muito importantes na hora de usar o Margin.Sem eles nós não conseguimos realizar esta propriedade (mesma coisa ocorre com o ponto e virgula) 


Como Usar: Depois que seu margin está pronto com valor e tudo,basta adicionar px; no final e pronto.


Aviso: Além do Pixel,nós podemos usar também os centímetros (cm;).

 Dúvidas?Então comente já!

 Bom,pessoal espero que tenham entendido.Até a próxima,tchau e fiquem com Deus!