How to stop Gmail from adding a margin to your images
Recently, Gmail has started behaving like Hotmail/Firefox by adding a margin around images. As you can guess, design and layout breakage ensues:
Based on our tests, this issue is affecting Gmail when viewed in IE7, Firefox 3.6, Google Chrome 4.1 (Windows), and Safari 4, Firefox 3.5 (Mac). Thankfully, there’s a simple fix.
The solution
You can fix this issue in all of the above clients by adding img { display: block; } to the <head></head> section of your HTML newsletter code. Campaign Monitor can automatically convert your CSS to inline styles, so once you’ve added this, we’ll do the rest:
Alternately, you can add it directly to your styles like so: <img src="image.jpg" style="display: block;" />. The result is the same - fixed!
If you or your clients use email templates, this is a good time to give them a check and add img { display: block; } if necessary. You might want to run them through our design and spam tests, just to be certain. By adding this to your styles, you will be hitting two birds with one stone by preventing image rendering glitches in both Hotmail/Firefox and Gmail.
Many thanks to the folks on the forums who wrote in about this. Let us know in the comments below if this has affected you, or you’ve come across a similar quirk elsewhere… And don’t forget to test your campaigns!
14th May
I do believe this might have to do with a switch to HTML5 doctype, as I have come across precisely this problem in other projects.
With an HTML5 doctype, images receive what seems to be the line-height attribute which text normally gets, and thus you get a “margin” underneath them. You can either set them to display:block or line-height:0, although I haven’t tested the latter enough to be sure it’s a good fix.
Point being: this has nothing to do with Gmail per se, but rendering of images in HTML5 doctype in general.
14th May
Doesn’t gmail automatically strip out styles anyway?
14th May
@Chris Gmail does strip out your styles that are placed in the <head> tag so it is best to use inline styles as much as possible. Also, you can move the <style> tag and its styles under the <body> tag and Gmail and others can still render the CSS appropriately.
@George I have tried the HTML5 doctype and can say that it does cause rendering issues. As well as using other doctypes as well can cause some rendering differences in regards to <table> and image spacing. I always use <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
14th May
You know what’s really funny - I got an email from microsoft sent to a hotmail address I use to test with..the email they sent is for Windows 7—- they didn’t add display: block to any image.
14th May
Ooops, do this in the <head> and you may find your images don’t look how you want them either. It might break your design. (It did break one of mine.)
14th May
@Jeremy - read the whole article.
14th May
Sweet, thanks for the fix.
Any updates on the “Email Standards Project” by the way ?
Last update on this blog was almost 3 years ago, last update on the email-standards.org blog was 9 months ago. :)
14th May
Of course, adding display:block to ALL your images may also cause unwanted problems. Let’s say you want tous inline images (a drawn arrowhead alongside some text, within an <a> tag, for instance) - adding display:block would cause the image to jump down to the next line. So, in these instances, we have to specify display:inline.
15th May
brilliant, thx for that tip!
18th May
Awesome Thanks!!
This had me running in circles last night .. much appreciated!
18th May
Jan, the last big initiative for the Email Standards Project was our fixoutlook.org campaign. The news that Outlook 2010 will continue to use the Word rendering engine was a big disappointment, but we might try and get more positive results from other email clients in the future.
If you have any suggestions or ideas you’d like us to check out, please leave a comment.
18th May
I would would find it extremely helpful to have a centralized collection of tips like these somewhere on the CM site.
18th May
@Jason Absolutely, that’s something we’re already working on
19th May
@Jason @ Mathew Patterson I completely agree. It seems crazy how few resources are out there considering these and other issues have been around for years. Some of my searches are returning email feeds from 2004! Not so helpful.
25th May
Jesus you saved me, thank you :)
Kindest regards
26th May
Thank you so much! This just saved me hours of debugging!
28th May
I love you guys. I spent about 2 hours trying to figure out the problem before hitting upon this article. I’m linking to it from my company’s wiki so I can look like the smart one. ;)
28th May
Oh thank god. We were pulling our hair out over here. I was certain that we’d previously tested all our emails in Gmail, but suddenly we found that all of our past emails were also displaying with broken designs. You’ve averted an apparent disaster for us.
2nd June
This is the same issue as the Hotmail fix, isn’t it? I actually assign display:block to all of my images and compensate in our design specs. From my experience if you just compensate for the image spacing gaps in your code there won’t be any surprises.
Email is to code what punk rock is to musicianship. The lowest common denominator gets lower and lower. I’m not sure in the five years I’ve been doing this that anything has become any better in terms of mail clients. I appreciate what you folks are trying to accomplish with the standards project—I continue to support it.
2nd June
Your note: Thanks, this is great.
Anyone having problems with Yahoo mail inserting padding around images? I’ve tried everything and it seems to place a 5px padding around them…
Googled it but came up with nothing…
2nd June
Dennis - Yep, similar issue, same fix. So adding display: block; will cover you for both Gmail and Hotmail.
SS - Wow, we’ll look into it and let you know if we experience a similar issue with Yahoo! Mail. Thanks for the tip on that one!
2nd June
If you add img{display: block} the editor controls in CM get a bit messed up so I add .mb-editor-button{display: inline;} to fix this.
Compare screenshots of the editor before & after adding .mb-editor-button{display: inline;}
2nd June
This has been an ongoing issue with hotmail for as long as i can remember. - I have always used display:block; to stop my emails blowing apart and am surprised that users on this post haven’t.
2nd June
Absolutly useful.
Just on question :
Recently I tried style=“border-collapse:collapse;” on the <td> to clear a similar problem with images.
Do I have to use style=“display: block;” or both styles ?
Thanks.
3rd June
You saved me a lot of time trying to troubleshoot.
I also encountered this issue in Comcast webmail. It wasn’t until a tester mentioned Gmail that I found this post for the solution. Comcast and Gmail share any technologies?
3rd June
Virtuousquare - Interesting! I’d still use display: block; as this issue affects images regardless of whether they’re contained in a table or not. No harm in using both styles, though.
Dan L - Admittedly we haven’t done much looking into Comcast webmail, but we’ll keep this in mind. We can’t say if Gmail and Comcast have much in common, keeping in mind that the margin issue affects Hotmail/Firefox, too!
3rd June
Now I will sound as complete idiot but sorry, I am really designer and not code writer. So my question is: I am trying toput the code into <head></head> section. When I go to preview I see the code written on the page and newsletter is still broken. What am I doing wrong?
3rd June
Hi Daniela, no worries, it’s all good! I simplified the example above for the sake of brevity. Have you declared img { display: block; } in the <style> tags like so?
...
<head>
...
<style type=“text/css”>
img { display: block; }
</style>
...
</head>
Feel free to send your code over to our team at support [at] campaignmonitor.com if you would like us to take a look.
4th June
Exactly the solution I’ve been looking for, thanks CM!
4th June
@Marco, my comment still stands. Supported by @Rob Dinsdale.
4th June
Too funny. I just opened this email, I was researching this issue most of today. I came up with the same answer. Thank goodness there’s an easy fix!
8th June
I have this same issue with images on websites I design with the strict XHTML doctype. Images are normally rendered inline with text, so it’s placed on the baseline, leaving a little room for the bottom of the letter “g” and “j”, etc., to sneak underneath. By using display: block, you tell it to stop treating the image like text, and instead like a DIV or any other block element. Thanks for this tip!
11th June
GENIUS!! that totally did it… wasted so much time messing with margins, padding, etc.. dunno how you realized it was the display property… THANKS A MIL!!
24th June
Thanks guys!
14th July
Thanks so much - saved my bacon!
16th July
That’s an odd new issue, thanks for the help with it!
29th July
Thanks guys, very useful tip!
7th August
Thanks so much.. awesome :)