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

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

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.

2019-02-15T08:47:15-03:00By |Dicas e truques|8 Comentários

Sobre o Autor:

Atua na área desde 2019, é formado em Sistemas da Informação e especialista em tratamento de dados, HTML, automação com foco em e-mail marketing.

8 Comments

  1. João Carlos 19 de janeiro de 2021 em 12:00

    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:

    • Andre Diniz 21 de janeiro de 2021 em 17:15

      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,

  2. Christian 6 de setembro de 2019 em 16:52

    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

    • Andre Diniz 1 de outubro de 2019 em 13:53

      Olá Christian, tudo bem?

      O código precisa ser inserido no style que fica dentro do head de seu HTML.

      Veja um exemplo abaixo.

      Exemplo Cod

      Um grande abraço,

  3. AFONSO 9 de abril de 2019 em 21:46

    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.

    • Andre Diniz 22 de abril de 2019 em 15:24

      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,

  4. Roger 27 de março de 2019 em 16:24

    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?

    • Andre Diniz 27 de março de 2019 em 16:44

      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,

Deixar Um Comentário