Por muito tempo a técnica de inserir a propriedade display:block do CSS na tag da imagem funcionou perfeitamente em e-mails do Gmail e Outlook.com.
Confira ela aqui.
Entretanto há mais ou menos um mês, notei que essa técnica simples e muito útil utilizada por nós, desenvolvedores de HTML para email marketing, deixou de funcionar nos emails do Outlook.com/Office365 e os espaços entre as imagens tornaram a aparecer. 🙁
Como retirar os espaços das imagens no Outlook.com e Office365?
Comecei a analisar as mensagens enviadas para o Outlook.com e notei que agora eles inserem uma <div> antes de cada imagem, e além da <div> é adicionado também uma propriedade display:inline-block no CSS.
Por padrão é inserido uma quebra de linha tanto no início quanto no final do elemento <div>. Já a propriedade display:inline-block no CSS faz a <div> ganhar um comportamento de palavra, ou seja, existirá um espaço entre as linhas.
Como você pode resolver o problema dos benditos espaços?
A solução é simples. Basta adicionar no elemento <style> de seu HTML algumas propriedades CSS. Caso não tenha o elemento <style> você terá que criar um.
Vamos lá:
Como dito acima, a propriedade display:inline-block faz a <div> ser tratada como texto então resolvemos isso eliminando os espaços entre as linhas, usando a propriedade CSS line-height:0, no caso da quebra de linha na <div> resolvemos com a propriedade display:block!important.
Seu código ficará igual ao exemplo abaixo.
<style type=”text/css”>
td > div {
line-height: 0;
}
div {
display:block!important;
}
</style>
Suas mensagens que chegavam assim no Outlook.com:
Vão passar a chegar assim:
É bem simples de fazer. 😉
Bom, é isso ai, pessoal.
Caso tenha alguma dúvida deixe nos comentários.
Abraços.
Por favor, realmente não estou conseguindo e quando colo o código o meu GMail fecha e fica carregando o ícone do GMail. Tenho que refresh a página. Veja meu código: uma imagem em cima da outra mas queria tirar o espacinho branco que não existe:
Oi João, tudo bem?
Insira seu HTML no seu servidor e cole o link aqui nos comentários para eu possa dar uma olhada nele e tentar te ajudar.
Um abraço,
Oi André, tudo bem?
Você consegue me ajudar? onde eu encaixo no código abaixo?
<img style=' display:block; margin:0; padding:0; border:none; ' src='https://4.bp…
Olá Christian, tudo bem?
O código precisa ser inserido no style que fica dentro do head de seu HTML.
Veja um exemplo abaixo.
Um grande abraço,
Boa noite Andre. Me interesso por tudo isso que você tá falando: feed RSS, email marketing, etc, mas não tô conseguindo entender.
Você dá cursos à respeito? Preciso de ajuda e esses posts são muito vagos pra mim.
Olá Afonso.
Tudo bem?
Infelizmente não dou curso sobre esses assuntos, esse mundo corrido que vivemos me falta hora no dia para me dedicar a cursos 🙁
Muito bacana que se interesse pelo assunto, realmente eles são sensacionais.
No endereço https://www.mediapost.com.br/email-marketing-expert/ você terá diversos materiais e um curso sobre E-mail Marketing pra te auxiliar na sua jornada.
Sucesso!
Um grande abraço,
André,
Boa tarde. Preciso de ajuda. Não estou entendendo em que parte do código insiro esse div. Pela leitura desse seu artigo, imaginei que estivesse falando que o Outlook cria divs automaticamente, e que bastava usar as propriedades display:inline-block, e as outras dentro das tags , onde também estão localizadas as tags de imagens e outros estilos, como cellspacing:0, entre outros.
Estou perdido, poderia me ajudar?
Olá Roger, tudo bem?
Sim, o Outlook cria as DIVs automaticamente, neste caso você irá apenas “forçar” o ajuste dela através das propriedades no CSS.
Basta inserir no CSS dentro do style os elementos.
td > div {
line-height: 0;
}
div {
display:block!important;
}
Espero que tenha sanado sua dúvida.
Um grande abraço,