Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

23 janeiro 2008

Diferenca entre margin e padding

Se você é como eu e vive xeretando o código do seu template, com certeza se depara com determinados valores que podem deixá-lo confuso. À princípio a diferença entre margin e padding me confundiu um pouco, por isso vou explicar para vocês o resultado de um e outro:

Margin determina a distância de um elemento para outro no template, por exemplo, a distância entre uma coluna e outra. Padding dá um espaço entre o conteúdo deste elemento para as bordas.

Visualmente para que se compreenda bem, veja na imagem1 a coluna do post, que está envolvida por uma borda vermelha. Esta coluna tem margin-left: 10px, ou seja, um espaçamento de 10 px entre o seu limite à esquerda e o limite da outer-wrapper (que é o 'corpo' do template). Já o texto em sí, que é o conteúdo do elemento main-wrapper (ou a coluna do post), está com margin e padding 0px e o resultado é que o texto fica colado nas bordas da coluna:



Aqui eu coloquei uma borda preta em torno do texto para que se visualize melhor:



Para arrumar esta distância entre o post e os limites da coluna, procure por:

.post {
margin: 0px;
border: 1px solid #000000;
}

Agora vou aplicar uma margin: 10px no post, ficando assim:



Agora vou acrescentar um padding: 15px;



Vejam como o texto se afatou das bordas pretas.

Neste caso, você pode, por exemplo, estabelecer uma cor para a coluna e outra para o post, o que torna de grande importância o uso de padding.

Artigos Relacionados

13 comentários:

Rô Rezende disse...

Oi, moça! Seu post veio muito a calhar, eu estou postando umas definições básicas, mas não sabia bem a diferença entre margin e padding. Vou linkar esse seu post que está mais do que bem explicado...bjos!

Sir House ™ disse...

Que ironia ariane, li seu blog inteiro sobre templates to amando , ta me ajudando pacas no novo layout do baixaserie!!!
gostaria de uma força sua!! te dou os creditos!!!! se tiver msn ajuda =]

jessesouza_ARROBAhotmail.com

bitocas!!

Ricardo Rayol disse...

Já vi que vou me divertir muito por aqui lendo tuas dicas. Já vou chupinhar a dica do nuvem de tagas ehehehehe

Agenda Brasil disse...

MUITO obrigado por seu blog!! Suas dicas sao vitais, pricipalmente para blogeiros iniciantes. com uma rapida lida em suas dicas meu blog ja mudou muito para melhor.
Linkei voce em meu blog.
Um grande abraco.

http://agendabrasil-shows.blogspot.com

soft disse...

Agradeço mais uma dica valiosa e na hora certa. Como de todas as vezes que passo aqui.
Obrigado.
Hugo Freitas
Porto Portugal

milton lorena disse...

Olá, fica difícil a gente não se esbaldar no seu blog! Parabéns e muito obrigado é muito pouco, mas é sincero.
abraços

Milton

Luiz Carlos, mais conhecido como "Will" disse...

HelloO!

Estou iniciando agora com meu blog o "Publicidade Jovem.com" e estou pegando umas dicas de formtação no seu blog, muito bom por sinal!
Parabéns!

Até!

Tiago Wakabayashi disse...

Adorei, isso também me encucou mas agora não tenho mais dúvidas

Obrigado \o\

Vou te chamar de Ariane-sama ,minha salvadora \o/

Já tem um fã \o\

Ariane disse...

:D legal!

Margot disse...

Ariane,o que faço para colocar uma separação (uma linha) entre as colunas? Procurei em vários sites e nada encontrei.
Parabéns pelo seu site... é muito bom.
Sou novata em Blogger.

obrigada
Margot

Unknown disse...

oi ariane...tenho um blog e queria que vc se pudesse me dar uma ajuda com o padding do meu blog...

esse foi o limite que consegui chegar no padding e mesmo assim ainda ta comendo meu banner pois o texto e o banner esta alinhado onde nao consigo arrumar...me da esse help ai....

www.downfind.blogspot.com

abraços!

alan disse...

bom noite, queria saber como faço para colocar uma borda em torno das colunas laterais?

Alcabecinha disse...

Olá..
seu post m ajudou e muito a eclarecer minhas dúvidas..
parabéns pelo seu blog q é d+.
além de ótimos tutoriais, tem um visual fantástico

Postar um comentário

Os comentários são moderados.