Home Resources Blog

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="https://www.campaignmonitor.com/assets/uploads/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!

  • George

    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.

  • Chris

    Doesn’t gmail automatically strip out styles anyway?

  • Frederick Polk

    @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

  • DRoss

    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.

  • Jeremy

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

  • Marco

    @Jeremy – read the whole article.

  • Jan Van Lysebettens

    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. :)

  • Rob Dinsdale

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

  • Shannon

    brilliant, thx for that tip!

  • Shark

    Awesome Thanks!!
    This had me running in circles last night .. much appreciated!

  • David Greiner

    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.

  • Jason

    I would would find it extremely helpful to have a centralized collection of tips like these somewhere on the CM site.

  • Mathew Patterson

    @Jason Absolutely, that’s something we’re already working on

  • GH

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

  • Liviu

    Jesus you saved me, thank you :)

    Kindest regards

  • Jeremy Glover

    Thank you so much! This just saved me hours of debugging!

  • Joshua

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

  • Robert Scott

    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.

  • Dennis

    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.

  • SS

    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…

  • Ros Hodgekiss

    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!

  • Graham McLellan

    If you add img&#123display: block&#125 the editor controls in CM get a bit messed up so I add .mb-editor-button&#123display: inline;&#125 to fix this.

    Compare screenshots of the editor before & after adding .mb-editor-button&#123display: inline;&#125

  • James Malton

    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.

  • Virtuousquare

    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 ?

  • Dan L

    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?

  • Ros Hodgekiss

    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!

  • Daniela B

    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?

  • Ros Hodgekiss

    Hi Daniela, no worries, it’s all good! I simplified the example above for the sake of brevity. Have you declared img &#123 display: block; &#125 in the <style> tags like so?


    <style type=”text/css”>
    img &#123 display: block; &#125


    Feel free to send your code over to our team at support [at] campaignmonitor.com if you would like us to take a look.

  • David Mitchell

    Exactly the solution I’ve been looking for, thanks CM!

  • Jeremy

    @Marco, my comment still stands. Supported by @Rob Dinsdale.

  • Susan

    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!

  • Mac Clemmens

    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!

  • Mikey

    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!!

  • Tom Buchok

    Thanks guys!

  • Tim

    Thanks so much – saved my bacon!

  • Jim Connolly

    That’s an odd new issue, thanks for the help with it!

  • Nick

    Thanks guys, very useful tip!

  • Krishna Reddy

    Thanks so much.. awesome :)

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free