Quando usar display:block nas imagens do email marketing?

Por Juliana Padron 13/02/2012

2 Comentários

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:

Exemplo de template de email marketing composto por imagens sem a propriedade de CSS display:block. — Exemplo de template de email marketing composto por imagens sem a propriedade de CSS `display:block`.

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:

<img src="imagem.gif" width="300" height="200" alt="Descrição da imagem aqui" border="0" style="display:block;">

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;.