Estou de férias em setembro, por isso talvez não atualize toda semana.

Helen Fernanda

terça-feira, 13 de janeiro de 2009

Margens e espaçamento interno

Nível: intermediário
Margeando

Margens (margin) e espaçamento interno (padding) ajudam a manter seu blog bonito e fácil de ler. Em muitos casos é só isso que falta para que a página fique realmente agradável.

Não são raros os blogs todo “espremidinhos” que encontro todo dia, em que o título “disputa” espaço com o texto que “briga” com as imagens. Muito desagradável. Em qualquer design o espaço em branco é muito bem-vindo quando utilizado corretamente. Muitos dos casos de elementos espremidos em blogs e outros sites podem ser resolvidos com margin e padding.

Margin

A margem é o espaço externo. Se minha casa fosse um elemento HTML, a margem dela seria a calçada. Quando um elemento utiliza margens, ele está dizendo a cada um dos demais: Hei, mantenha-se a pelo menos X pixels de mim, ok?

Calçada
Calçada surrupiada do Panóptico

Texto com margem

Código:

<div style='margin-top:4px; margin-bottom:5px; margin-left:100px; margin-right:7px;'>Neste exemplo de texto, as margens foram definidas na própria tag.<div>

Visualização:

Neste exemplo de texto, as margens foram definidas na própria tag.

Texto e imagem com margem

Código:

<img style='margin:5px; margin-right:100px;' src="http://lh5.ggpht.com/_HlIyV_enpD8/SWvvyg33EGI/AAAAAAAACH4/crZKTiaSiP0/s400/yahoo.jpg" align='right' />Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Visualização:

Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Padding

Se margin é a calçada, padding é o quintal, o espaço entre o muro (bordas) e o elemento (espaço construído da casa). Vejamos alguns exemplos:

Exemplo sem padding

<div style='border:1px solid black;'>Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.</div>

Visualização:

Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.

Exemplo com padding 1

<div style='border:1px solid black; padding:5px;'>Este é um texto com padding, observe que usei a mesma medida dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei a mesma medida dos quatro lados.

Exemplo com padding 2

<div style='border:1px solid black; padding:5px; padding-left:50px; padding-right:10px;'>Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.

Margin e padding

Exemplo de código:

<div style='text-align:justify; border:1px solid salmon; height:228px; padding:5px;'><img style='margin:5px;' src="http://lh5.ggpht.com/_HlIyV_enpD8/SWvvyg33EGI/AAAAAAAACH4/crZKTiaSiP0/s400/yahoo.jpg" align='right' />Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.</div>

Como fica:

Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.

Na folha de estilos

Para mudar as margin e padding de qualquer elemento na folha de estilos é muito simples também. Veja o exemplo:

h2 {padding:5px; margin-top:10px; margin-bottom:5px;}
blockquote {padding:5px; padding-left:50px;}
body {border:0px; margin:0px; padding:5px;}
blockquote #cita {margin-top:5px; margin-bottom:10px; margin-left:25px; margin-right:50px;}
]]></b:skin>

Divirta-se!

20 comentários:

  1. Puxa, que legal o seu blog! Cheguei pela Mariza Lourenço, e... quantas dicas legais! Adorei! bjs

    ResponderExcluir
  2. @Ana, legal também foi você ter chegado aqui! Volte sempre!

    ResponderExcluir
  3. Uma das coisas q mais curto nos layouts recentes, da chamada web 2.0, são os respiros, margens, paddings, textos grandes! hehe

    Abraço!

    ResponderExcluir
  4. Oi Helen.. sei que vc deve receber muito pedidos assim... mas se vc puder (e quiser dar umas risadas) dar uma olhada no meu blog pr me informar se ah algo de margin e padding que pode ser melhorado no meu blog... Se vc tiver um tempinho gostaria de ouvir sua oponiao... Obrigado pela atencao..

    Alberto publicou um post sobre.. Seja bem vindo ao Sexy Help Desk

    ResponderExcluir
  5. NEM PRECISA, NE,?
    SEMPRE QUE VENHO APROVEITO.
    NÃO DEIXE DE FAZER O QUE FAZ.
    UM ABRAÇO.
    JADER RESENDE.

    ResponderExcluir
  6. nossa me ajudo muito no meu blog nao tinha o "padding" ai ficava meio estranho .. agora eu coloquei e ficou bem legal . valew =)

    ResponderExcluir
  7. Cara, Helen! Como posso aumentar os espaços entre um comentário e outro? No meu blog o espaçamento está muito curto. Mais uma vez obrigada pelas dicas maravilhosas! Abração!

    ResponderExcluir
  8. Amei! este Bloog me ajudou muito....meu Bloog ficou mais organizado com as margem...muito obrigado

    ResponderExcluir
  9. Olá Helen,

    Vejo que você é uma das pessoas que pode me ajudar...

    Uso um fansite com template "Drive-Long" e as colunas dele são estreitas...

    Resolvo isso nas margens e paddings?

    Obrigada, Key Brito.

    ResponderExcluir
  10. Olá muito interessante, gostei muito vou acompanhar esse site.

    ResponderExcluir
  11. Você sabe como eu faço para reduzir o espaço entre o título e o texto de uma postagem?

    ResponderExcluir
  12. Anônimo, geralmente você tem que configurar o .post-title dentro da folha de estilos. Mais ou menos assim:

    .post-title {margin-bottom:20px; padding:5px;}

    Mas antes olhe seu código e busque .post-title. Pode ser que isso já esteja configurado e você só precise mudar os valores até ficar como deseja.

    ResponderExcluir
  13. Olá Helen!
    Eu gosto dessa margem que você tem no blog,essa "pontilhada",como eu faço pra colocar ela?

    ResponderExcluir
    Respostas
    1. Fabricio, confira o post www.htmhelen.com/2008/11/aprendendo-usar-bordas.html. Para aplicar ao seu blog, descubra qual seletor da folha de estilos delimita o conteúdo.

      Excluir
  14. Ola, estu precisando de ajuda com margem para meu blog.
    Nesse post aki ( http://2my4you.tumblr.com/private/34432280412/tumblr_mckg8fDz4F1rg2e3e ), da para ver que o texto chega ate o "fim" da pagina ...e ao invez de pular de linha, ele continua.

    Pode me ajudar a por no theme a margem dele ???

    O me dizer o codigo que tenho que por para que todos os posts desta area terem uma margem.

    Obrigado

    ResponderExcluir
    Respostas
    1. Lucas Elias, é preciso conhecer a folha de estilos original do Tumblr, não é o meu caso. Sugiro que procure fóruns e blogs específicos. Boa sorte!

      Excluir
  15. Muito bom!
    Parabéns pela forma didática (e prática!) ao expôr o assunto.

    ResponderExcluir
  16. Muito legal o seu blog. Amei. Consegui reformar meu blog com algumas dicas daqui. Obrigado! <3
    Voltarei sempre que puder aqui. rsrs

    ResponderExcluir

Posts relacionados