Conheça a nova técnica para retirar os espaços das imagens no Outlook.com e Office365

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.

Avalie este artigo:
Conheça a nova técnica para retirar os espaços das imagens no Outlook.com e Office365
5 (100%) 3 votos

ATUALIZAÇÕES GRÁTIS

Cadastre-se abaixo para receber no seu e-mail artigos legais como este!

Gostou? Compartilhe:

Deixe seu comentário!