A ferramenta de envio de email marketing da Templateria agora se chama Zenmail e tem um site dedicado a ela.

Insights de email marketing

Quando usar display:block nas imagens do email marketing?

O display:block é um recurso que evita o espaçamento entre as imagens no Gmail e no Hotmail, mas nem todas as imagens do seu email marketing devem usá-lo.

O recurso style="display:block;" é utilizado nas imagens dos templates de email marketing para evitar que programas de email como Gmail e Outlook.com acrescentem um espaço de quase 5 pixels ao redor delas. Isso prejudica a exibição correta de layouts que dependem da justaposição exata das imagens, como aqueles compostos por recortes gerados no Photoshop, Illustrator ou XD. Como neste exemplo:

envie seu email marketing agora!

crie sua conta no Zenmail, conheça a plataforma e escolha o melhor plano para começar seus envios.

Neste email marketing, 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;.

Quando o seu email marketing segue a estrutura desse exemplo anterior, ou seja, quando ele depende que todas as imagens estejam perfeitamente “grudadinhas” entre si para “montar” o layout 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, no HTML, 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;

Receba nossa newsletter

Cadastre-se e fique por dentro das nossas novidades e do universo do email marketing! Nossa newsletter é enviada, no máximo, uma vez por mês, você pode se descadastrar a qualquer momento e seu endereço de email está seguro conosco.

Newsletter da Templateria

Receba em seu email conteúdos exclusivos sobre email marketing: