21 May 2014
Fixing HTML Emails – Blank Space Around Images in Tables
Some email services and clients react very strangely when dealing with HTML. If you develop HTML emails frequently, then you know all about that though. If you don’t, then let this post be your tip of the day.
Let’s say you have a table in your email that contains 2 images — a top and bottom — and they are meant to look attached to one another (so no space — no cellpadding, no cellspacing). In your browser, it looks perfect. Heck, it looks good in even Microsoft Outlook!
But then you notice that in Yahoo! Mail and GMAIL that there is a little bit of white space separating the two. How do you deal with that?
Thankfully, it’s easy. You need to add inline-styles to your images and set them to display:block:
<img src="image.jpg" style="display:block;" alt="" />
The white space will then vanish.