Diferença de Margin – Padding

Compartilhe a ajude a divulgar o blog:

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.

padding

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…

Leia Também:

Sobre Tilo

Profissional FrontEnd desde 2006, Executa trabalhos com xHtml, CSS, JavaScript, MySQL e PHP, estudante de C# e SQL. Cursa Tec. em Analise e Desenvolvimento de Sistemas na UniItalo.
Esta entrada foi publicada em XHTML & CSS e marcada com a tag , , . Adicione o link permanente aos seus favoritos.

Uma resposta a Diferença de Margin – Padding

  1. Anderson disse:

    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.

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree