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:

{title}

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:

{title}

{title}

Alternately, you can add it directly to your styles like so: <img src="image.jpg" style="display: block;" />. The result is the same - fixed!

image

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!

Posted by Ros Hodgekiss

38 Comments

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

  • Chris
    14th May

    Doesn’t gmail automatically strip out styles anyway?

  • Frederick Polk
    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”>

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

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

  • Marco
    14th May

    @Jeremy - read the whole article.

  • Jan Van Lysebettens
    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. :)

  • Rob Dinsdale
    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.

  • Shannon
    15th May

    brilliant, thx for that tip!

  • Shark
    18th May

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

  • David Greiner
    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.

  • Jason
    18th May

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

  • Mathew Patterson
    18th May

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

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

  • Liviu
    25th May

    Jesus you saved me, thank you :)

    Kindest regards

  • Jeremy Glover
    26th May

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

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

  • Robert Scott
    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.

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

  • SS
    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…

  • Ros Hodgekiss
    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!

  • Graham McLellan
    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;}

  • James Malton
    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.

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

  • Dan L
    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?

  • Ros Hodgekiss
    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!

  • Daniela B
    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?

  • Ros Hodgekiss
    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.

  • David Mitchell
    4th June

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

  • Jeremy
    4th June

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

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

  • Mac Clemmens
    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!

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

  • Tom Buchok
    24th June

    Thanks guys!

  • Tim
    14th July

    Thanks so much - saved my bacon!

  • Jim Connolly
    16th July

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

  • Nick
    29th July

    Thanks guys, very useful tip!

  • Krishna Reddy
    7th August

    Thanks so much.. awesome :)

Sign up for free.
Then send campaigns for as little as $9/month

Create an account