Gmail e Hotmail: Como tirar os espaços das imagens

Há algum tempo a Google fez mudanças no Gmail na ferramenta de renderização das mensagens com imagens e com isso surgiu um problema que afeta e muito o visual das mensagens, espaço nas imagens. O mesmo acontece com o Hotmail. Veja abaixo um exemplo:

Gmail e Hotmail: Como tirar os espaços das imagens
O bom é que para cada problema existe uma solução e para esse problema existe uma simples e rápida. Basta adicionar uma propriedade do CSS na tag da imagem.

Exemplo:

Antes:

<img src="minha_imagem.jpg" />

Depois:

<img src="minha_imagem.jpg" style="display: block;" />

Feito isso, basta enviar.

Veja abaixo o resultado:

Como tirar os espaços das imagens
Simples assim…
Até a próxima!

Avalie este artigo:
ATUALIZAÇÕES GRÁTIS
Faça como os 12,610 leitores. Cadastre-se grátis!

Gostou? Compartilhe:

Ademir Diniz

Analista de Sistemas formado pelo ISES, especialista em E-mail Marketing e criador e mantenedor do blog sobre e-mail marketing www.EmailMarketing.eti.br

52 Comentários

  1. Davi disse:

    amigo ja coloquei de tudo e não funciona poderia me ajudar?

  2. Fernando disse:

    Boa tarde.
    Estou tendo mesmo problema de borda nas imagens, apenas no mobile, e acredito que no app do gmail no android.
    Já fiz de tudo, coloquei 1 imagem por linha, coloquei display:block; e border=”0″ nas imagens…..e continua dando o erro. Pode me ajudar?

  3. Alexsandro Mascarenh disse:

    Boa Tarde, mesmo colocando o style continua o espaço em branco.

    Segue a tag que fiz. Me ajuda por favor.

  4. Vinicius disse:

    Ja usei border 0 e display block , quando encaminho para meu 2 email ele não corta mas quando reencaminho para min ele volta com espaço entre as imagens, qual seria o problema?

    • Ademir Diniz disse:

      Olá, Vinicius.

      Neste caso é necessário verificar o que o programa está fazendo com a mensagem quando ela é encaminhada. Encaminhe para meu e-mail para eu ver.

      Abraço

      • Watson Marconato disse:

        Olá Ademir…
        Seguinte.. sei que não é recomendado criar um email mkt somente de imagens… mais é uma necessidade específica…

        Eu criei tudo em tabela, removi os espaçamentos cellpadding… etc.. e inseri o display block inline para cada imagem… mais quando vai para o hotmail / gmail ele ainda insere os espaços em branco…

        Existe alguma outra forma?

        Obrigado e parabéns pelo Site.

  5. fabiano oliveira disse:

    Olá boa tarde! amigo eu estou tentando aprender esse maceta para não dar espaço nas imagens a mais de 3 meses e não consigo, ficaria muito grato se voce me manda-se ´passo a passo, pois não sei onde devo ir no gmail para adicionar o display block, aguardo resposta desde já muito obrigado!

  6. Hamilton disse:

    Cara, muito obrigado, eu já estava ficando louco, resolveu um problemão!!! abraço!!!

  7. sergio disse:

    Boa tarde Ademir,

    Estou com um problema com bordas no meu template, consegue ajudar? O HTML tá redondinho, visualização idêntica nos principais browsers e tal… A questão é um espaçamento chato que acontece quando disparo usando o sistema de e-mail marketing: pense na newsletter com um contorno (outline) de 1px ao redor de todo o template: os borders de cima e de baixo, tudo ok (consegui resolver usando style=”line-height:0pt;) mas o grande problema é nas borders laterais, não estão respeitando os 1px de largura, pode me ajudar? Obg, parabéns pelo blog.

  8. Parabéns pelo post! Útil.

  9. Natee disse:

    Muito Obrigada, consegui ajeitar isso!

  10. Mariana disse:

    Muuuito obrigada!!

  11. davi disse:

    Olá Ademir, fiz tudo informado, mas não funciona no gmail, fica o espaço em branco.
    te enviei um email para, se puder, me ajudar 🙂
    muito obrigado

  12. Felipe Girotti disse:

    Vlw, estava doido com isto já.

  13. Luiz Maeda Jr. disse:

    Olá Ademir, a tag não surtiu efeito. Te enviei um e-mail pedindo um auxílio. Será que não funciona usando tabelas?

    Tirei todos os espaçamentos possíveis, mas no Gmail e Hotmail ainda está desconfigurando.

    Abraços e parabéns pelo site!

    • Ademir Diniz disse:

      No seu caso Luiz. A mensagem foi criada no MS Word e está cheia de XML e códigos desnecessários. O problema não é espaçamento das imagens, mas sim a forma que estão definidas as dimensões da mensagem.

      Te respondi o e-mail.

      Abraço

  14. Alberto disse:

    Olá Ademir,
    Não consegui resolver o problema… pode me ajudar?!

  15. Miguel disse:

    Pessoal,
    Vejam o tipo de aspas que estão inserindo na declaração style=”display: block;” . Quando chequei este detalhe, vi que uma das aspas estava errada. Corrigi e deu certo. Vlw Ademir.

  16. Felipe disse:

    Olá Ademir, tudo bom?

    Primeiramente, parabéns pelo site.

    Estou tendo alguns problemas com esse espaçamento entre as imagens. Tentei resolver com a sua dica, porém não consegui.

    Existe alguma outra maneira de resolver?

    Abraços!

    • Ademir Diniz disse:

      Olá Felipe,

      Se você estiver exportando sua mensagem de algum editor de imagens, como Photoshop, por exemplo, pode ser problema com algumas imagens chamadas “spacer.gif” que estes editores exportam. São imagens de 1px em branco apenas para deixar a mensagem alinhada, mas em muitos casos, apenas atrapalham.

      Para eu poder te ajudar, encaminhe sua mensagem pra ademirdiniz@ademirdiniz.com.br que eu vou analisar e te ajudar.

      Abraço

  17. emerson disse:

    olá não esta dando certo como fazer .?

  18. Danilo disse:

    obrigado, funcionou perfeito

  19. Karine disse:

    Puxa vida, salvou a pátria! Esses espaços são desesperadores. hahaha

    Obrigada!

  20. bianca disse:

    Olá, e como tirar os espaços das imagens na conta do yahoo??

    obrigada
    Bianca

    • Ademir Diniz disse:

      Boa tarde Bianca, tudo bem?

      Da mesma forma. Precisa inserir o display:block em cada imagem para que fique sem espaços. Para isso, você precisa ir na parte de edição via código font (HTML).
      Não sei bem, mas pode ser que no editor visual de e-mail do yahoo possa criar um estilo para a imagem e nesse estilo, basta inserir o código acima.

      Caso não consiga ou ainda tenha dúvida, mande um e-mail para mim.

      Abraço

  21. Marcelo de Carvalho disse:

    Amigo, passei mais de duas horas enlouquecendo com estas malditas linhas!
    O pior é que aparecia nos navegadores de alguns computadores e de outros não. Tava quase ficando doido, mas esta solução foi definitiva. OBRIGADO MESMO!!!

  22. camilota disse:

    Escuta, estou fazendo o emarketing no mailchimp…se algém ja usou, tentei usar o codigo do hml q vc passou mas não da certo…ele continua deixando o espaço…ja tentei de todos os jeitos..c vc puder criar uma conta la e tentar ver se eh diferente ficaria muito grata…abraços

  23. Rodrigo disse:

    MUUITO OBRIGADO!

  24. Juazeiro do Norte disse:

    Boa amigo. Parabéns!

  25. Cleiton Alves disse:

    Ao utilizar imagens com display:block dentro de links “a” os espaços continuam no Gmail, e se for no Firefox ou Safari ainda cria um traço azul. Não consigo resolver … alguém já consegiu?

  26. Ademir Diniz disse:

    Tem certeza que fez da forma correta?
    Sempre uso essa técnica e sempre funciona!

    Veja se está fazendo da forma correta e se quiser, me envie o código fonte da mensagem através do contato que eu vejo o que pode estar errado!

    Abraço

  27. Anonymous disse:

    Não funcionou.

  28. Ademir Diniz disse:

    De nada Cássio.
    Fico feliz em saber que ajudei!

    Abraço e continue lendo os pots do blog.

  29. Cássio Lacerda disse:

    Muitooooooooooooooooooooooooooooooooooo Obrigado!
    2 dias de dor de cabeça rsrsrsrs

Deixe seu comentário!