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.