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

Citação:

---

<div id="padding-exemplo"> Texto </div>

---

Style CSS

Citação:

---

#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

Citação:

---

<div id="margin-exemplo">teste</div>

---

CSS

Citação:

---

#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

Citação:

---

<div id="margin-exemplo">teste</div>

---

CSS

Citação:

---

#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

muito bom seus tutorial amigão vou da um estudada nos seu TT css

Olá seu tópico contem uma irregularidade de acordo com as regras, esta citando o nome de outro fórum, retire e evite alguma punição, obrigado e desculpe qualquer coisa.

Perdão é que eu vi que tinha dado ROLLBACK aqui na IMP , ai na preça de re-passar os conteudos ,nem vi.
Desculpa (;