Diferença de Margin – Padding
Posted by Tilo | Posted in XHTML & CSS | Posted on 05-03-2009
Tags:CSS, Margin, Padding
1
Ai vai uma dica rápida…
Muita gente tem duvida sobre a diferença das propriedades CSS margin e padding, ai vai uma explicação bem rápida.
Margin = Margem
.classe { margin: auto; }
Espaço do limite do elemento pra fora.
Padding = Preenchimento
.classe { padding: auto; }
Espaço do elemento pra dentro.
Exemplo:
Padding: O espaço entre o inicio do paragrafo e a primeira letra. lembrando que se o paddin e um preenchimento você não pode usar em elemento IMG.
Margin: espaço entre o fim de um elemento e o proximo.
você pode usar as dua propriedades da forma completa:
.classe {
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
.classe {
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: auto;
}
ou da forma shot (atalho):
.classe { margin: auto auto auto auto; }
.classe { padding: auto auto auto auto; }
a ordem dos elemento é a mesa da completa:
para cima, direita, abaixo e esquerda; dessa forma você já declara todos os valores em uma unica linha, porem se escrever apenas uma vez ele distribui o mesmo valor 4 vezes.
caso você queira que acima e abaxo tenham um valor, e para direita e esquerda tenha outro valor você pode usar o shot2:
o primeiro valor vai para acima e abaixo e o segundo valor para esquerda e direita:
.classe { margin: 0 auto; }
.classe { padding: 0 auto; }
espero ter ajudado…
discordo em termos, algumas coisas realmente sao feitas com hacks, mas existem outras maneiras de fazer as mesmas sem usar hacks. eu evito passar num ponto ao ter que usar um hack… escrevendo html de forma semantica correta para que nao precise usar hacks.