Margin / Padding – CSS

Entenda o básico dos básicos do Margin e Padding em CSS

Margin / Padding - CSS

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.

loading...

Escreva aqui !