Estou de volta depois de uma sumida do blog, e já contando os dias para entrar de férias para postar mais artigos legais.
Dessa vez eu trago uma dica para quem esta aprendendo CSS.
Quando eu estava dando os primeiros passos no mundo dos padrões web, tinham duas propriedades que me tiravam a paciência, Margin e Padding. Apesar de terem algumas diferenças, essas propriedades são fáceis de serem confundidas.
O margin é usado para separar um elemento, uma div por exemplo, dos outros elementos que estão por perto. Para entender melhor vamos pegar o exemplo de uma div com 200 pixel de largura. Se eu colocasse um margin de 50 pixel de cada lado dessa div ela ia acabar ocupando 200 + 50 + 50 = 300 pixel. Perceba que a largura da div é somada com o margin em cada lado. É como se fossem os 200 pixel da div, mais um espaço de 50 pixel em cada lado. O margin fica do lado “de fora” da div.
Agora pense nessa div com 200 pixel de largura e eu coloco 50 pixel de padding em cada lado, a div ia continuar com os mesmos 200 + 50 + 50 = 300 pixel. Porém, se eu colocasse um texto dentro dessa div, ele ia ficar com 50 pixel de distância da borda da div. É como se o margin de 50 pixel em cada lado estivesse “enchendo” a nossa div.
Resumindo, o margin é um espaçamento por fora do seu elemento, enquanto o padding é um enchimento.
É muito fácil confundir essas duas propriedades. Na maioria das vezes em padding resolve, mas é sempre bom ficar de olho, principalmente no Internet Explorer.
Isso é tudo mas se você tem mais alguma dica comente aqui.
Comments(0) 
