HTML Email Horrors – Part 1: Horizontal Image Gaps in Gmail

Horizontal Gaps in Gmail

HTML emails are a pain in the neck to begin with. There are so many rules and conditions and every email client has it’s own nit-picks to making an html email render correctly. I can go on and on and probably dedicate an entire section on the nuances of email clients and their rendering abilities, but I’m going to just mention one of them right here. Particularly because it’s due to a change that happened recently.

It turns out, for some reason, Google changed the way they handle the rendering of images in an html email. As a result, horizontal gaps would appear above and below images where they really should be flush against each other. Depending on how you’ve made your image slices this could make your email look very broken.

The solution to this is to add a style=”display:block” within all the img tags. For example:

<img style="display:block" src="yourimage.jpg" alt="your image" />

That’s it. Well that solves the Gmail problem.

Full credit goes to these guys.