Blog de Email Marketing

Templates

Quando usar display:block nas imagens do email marketing?

Juliana Padron Por Juliana Padron em 13.02.2012

Para quem não sabe, o recurso style="display:block;" é utilizado nas imagens dos templates de email marketing para evitar que programas de email como o Gmail e o Hotmail acrescentem um espaço de quase 5 pixels ao redor delas. Isso prejudica a renderização de templates que dependem da justaposição exata das imagens para serem exibidos corretamente. Como neste exemplo:

Neste template, você pode identificar pelo menos três imagens que o compõem por causa dos espaços em branco entre elas. Isso acontece porque, na tag de cada imagem, está faltando colocar a propriedade do CSS display: block;, que é o tema desse post.

Quando o seu template segue a estrutura desse exemplo anterior, ou seja, quando ele depende que a justaposição das imagens seja exata para “montar” a mensagem na tela, é imprescindível que todas as tags dessas imagens contenham o display:block;, desta forma:

Essa propriedade faz com que o elemento seja tratado como um bloco, assim como parágrafos. Um elemento de bloco não permite que nenhum outro elemento apareça ao lado dele (exceto quando este for declarado com a propriedade float, mas que não funciona para email marketing), apenas abaixo ou acima.

Com essa explicação, já fica claro que o display:block; não deve ser usado quando você tem a intenção de posicionar outro elemento ao lado da imagem, como nos casos em que se usa uma imagem de ícone e um texto ao lado dela, por exemplo. Nesta situação, o display:block; não deve ser usado para que o texto não seja “quebrado” para a próxima linha.

Apenas esteja ciente que, sem o display:block;, aquele espaçamento extra ao redor da imagem será aplicado pelo Gmail e pelo Hotmail. Se isso não prejudicar o layout de seu template (faça envios de testes para saber), ótimo! Do contrário, você precisará usar uma tabela para controlar o posicionamento e as distâncias entre o ícone e o texto.

É importante destacar que, para construir templates compostos apenas por imagens, que precisam estar exatamente justapostas umas às outras, o uso de tabelas é obrigatório para que a renderização seja perfeita. Insira cada imagem dentro de uma célula da tabela e, na tag de cada imagem, declare o display:block;.

Neste exemplo, os espaços em branco representam as células vazias de uma tabela onde os próximos pedaços da imagem que compõem o template seriam inseridos, cada uma com o seu respectivo display:block;

  • Muito Bom Juliana Padron.

  • Juliana

    Ótimo! Obrigada pela explicação!

  • Ka

    Olá. Estou usando display:block e a imagem continua separada  hotmail:

            
                
        
     

       

    Obrigada.

  • Deraldo

    Juliana, te agradeço de coração, já estava ficando louco com esse problema. Parabéns pelo post

  • Thiago Ladislau

    Muito obrigado, me ajudou muito. Que Deus continue te abençoando.

  • ótima explicação mano! grato!

  • Lucas Thomé

    Muito boa explicação!
    Salvou vidas hehehhehe

    • Felipe Viana de Almeida

      e empregos 😛

  • Felipe Viana de Almeida

    Cara você salvou vidas e empregos, muito obrigado pela dica!

  • kelsen

    Opa!!! tenho uma dessa forma, mas mesmo usando o display continha com erro. Alguem pode me ajudar?

  • Thiago Büll Amorim

    Tente usar o tamanho nas imagens com os mesmos tamanhos nas TD.

  • Tonielton Mota

    display=”block” nem sempre funciona, caso a borda branca permaneça utilize align=”absmiddle”.

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações