Margin / Padding - CSS

Mais um tópico que ninguem vai dar ateção mas vamos lá!

Vi uma grande deficiencia nos sites dos usuarios IMP e , agora to tentando ajudar todos.


ENTENDA PADDING E MARGIN


PADDING:

Padding , é um espaçamento interno que é utilizado para poder fazer como um PARAGRAFO .

Como funciona ...
Exemplo , irei criar uma div:

HTML

Texto

Style CSS

#padding-exemplo {
padding:5px;}

Vamos exemplificar agora sobre...

padding-top: Cria um espaço acima da div.
padding-bottom:Cria um espaço abaixo da div.
padding-left: Cria um espaço a esquerda da div.
padding-right: Cria um espaço a direita da div.

Se você cria uma div com o width de 700 e coloca padding left de 20 , o tamanho da div na verdade ficará 720 px.
se você quer a div de 700px com padding left de 20 , terá que fazer a width de 180px.



MARGIN
Margin é como uma margem que o CSS cria .
Ela é como o posisionamento da div.

EXEMPLO:

HTML

teste

CSS

#margin-exemplo {
margin:0 auto; }

O " margin:0 auto; " centraliza a div porque é simples:
Entenda a base do margin , ele é basiado nos lados horarios:

margin :5px 5px 5px 5px;

VERDE: TOPO
LARANJA : DIREITA
VERMELHO : BAIXO
AZUL : ESQUERDA



EXEMPLO 2 :

HTML

teste

CSS

#margin-exemplo {
margin:25px 25px; }

CIMA BAIXO

DIREITA ESQUERDA

Espero ter deixado bem explicado para todos.

PS: O POSISIONAMENTO HORARIO SERVE TANTO PARA PADDING QUANTO PARA MARGIN

Não entendo nada,mas sei que é de ajuda ^^
Vlw por estar contribuindo com o fórum perry =D

De nada (;

padding e margin eh confuso mesmo xD
bom tuto ehm! *.*

Obrigado..
Espero ajudar a tirar essa confusão.
A sim , gente, Sobe as posições feitas do modo Horario...Isso vale para tudo ,não sómente para margin ou padding,mas paratudo.