Gmail displaying gaps between images

Question

Building an overly fancy HTML mail for a client. Code validates at http://validator.w3.org as XHTML 1.0 Transitional by direct input. Thing is Gmail displays gaps between each of the images.

Each image and its anchor have inline styles setting padding and margin to zero. There is no whitespace between the anchor tag and the enclosed image tag or between subsequent anchor tags. There are no newlines in the code.

Here it is pasted straight out of the received email:

<a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=8D916F3F-E119-4746-A4AB-010F99CE901C&amp;sessionlanguage=&amp;menu_id=007F7A77-97DB-4601-9691-CB7AA4ED7950" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Buy Tickets" border="0" height="55" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_buy_tickets.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=1768A54F-7E43-474A-B18A-4BBF04F14E92" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Three Stages Presents" border="0" height="182" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_presents.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=CE8BDACE-EB4C-4785-BA41-9B9FF6A87D03" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Partners of Three Stages" border="0" height="181" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_partners.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=63DB284F-02DE-4A30-A48C-F03E619E59CA" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Productions of Three Stages" border="0" height="176" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_productions.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="http://www.vcstar.com/news/2011/jan/20/hats-off-to-a-chorus-line-the-high-kicking-in-an/" shape="rect"><img alt="The national tour of &quot;A Chorus Line&quot;--opening at Three Stages 2/11--receives a rave review in Ventura. " border="0" height="134" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_1.jpg" width="180"></a><a href="http://www.nytimes.com/2011/01/13/books/13book.html?_r=2" shape="rect"><img alt="Mr. Rosanne Cash’s new memoir" border="0" height="44" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_2.jpg" width="180"></a><a href="http://www.archive.org/details/Insight_080403_a" shape="rect"><img alt="An interview with Jeffrey Siegel on KXJZ's &quot;Insight&quot; (He's the second guest on the show). Originally recorded April, 2008." border="0" height="68" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_3.jpg" width="180"></a><a href="http://www.tampabay.com/news/humaninterest/magic-stretches-minds-grins-muscles-of-handicapped-children-in-largo/1148482 " shape="rect"><img alt="Twenty years after his own accident, Kevin Spencer, of Spencers Theatre of Illusion teaches magic to kids—as therapy. " border="0" height="81" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_4.jpg" width="180"></a><a href="http://www.facebook.com/pages/Three-Stages-at-Folsom-Lake-College/169056696438709" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Follow us on Facebook" border="0" height="92" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_facebook.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a>

Here is the complete document. https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html It's the left column that Gmail is showing gaps on.

Any advice?

Solution 1

The specific answer to your question is that Gmail adds extra space to table cells which only contain an image. To fix this issue add to these images:

style="display:block"

Tip: Campaign Monitor is a great resource, as is MailChimp. Both provide several guides, template examples, etc.

Solution 2

For any image in its own table cell, use display: block and line-height: 50%

<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" />

Set the padding to 0 and margin to 0, although setting margin to -1px might fix small gaps on iPhone/iPad.

stick: <style type="text/css"> img{display: block;}</style>

...within the body tag, not the head, as it'll get stripped out by some clients.

Don't get hung up on if your code validates, getting email templates working cross-browsers and clients results in some fugly code!

P.S. Watch out for Outlook 2007 (it uses the Word rendering engine) and Hotmail on Firefox.

Solution 3

Dunno if it’s any help but there is a comprehensive guide to CSS support in the different email clients at www.campaignmonitor.com/css/

Solution 4

In my html I have a lot of table cells which contain multiple images of the same height side by side. The problem with this technique turned out to be that I could not make my images display block since that would drastically mess up my layout. Turned out the solution for removing the gmail gap was to simply add style of line-height: 50% to the table itself. I tested in all browsers with positive results. To be honest, I'm not 100% sure why this works or if it will work in every case but if your situation is like mine, you might want to give this solution a try.

PS, thanks to @Jon and @Jason for giving me the idea.

Solution 5

I know this is an older post, but this helped me, for anyone still looking: <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>

Wrap your image(s) in a paragraph tag with margin, font-size, and line-height set to "0". I noticed that both Outlook and Gmail were adding erroneous paragraph, span, and font tags. Hope this helps someone else.

View more solutions

Comments

[Alan Macdonald]

When I send these emails from Outlook to gmail, the style attibutes never show.

[Atul Kumar]

From Outlook => Gmail. That's not a thing I'd personally try to troubleshoot. Outlook is not a proper tool for originating email campaigns with any kind of reliable formatting. At least, it was the craziest least-compliant code mangler out there last I dev'd email campaigns. It's been a few years.

[Alan Macdonald]

totally agree however the requirements I had were for the company Outlook footer signature.