Seeing Gaps Between Your Images in Outlook 2013?


We’ve compiled 4 in-depth posts on Outlook, including this blog on Seeing Gaps Between Your Images in Outlook 2013, into an extensive series surrounding this client and its vexing quirks.

Get the Whole Series in One Click…

Designing for Outlook is like chasing the ever elusive White Whale. We spend hours pursuing it, tracking down bugs and glitches, trying to achieve pixel perfection in a distinctly imperfect environment. We’ve spent hours testing to ensure we’ve worked out all the Outlook kinks and we’re sharing our years of experience coding for this pesky email client in one, exhaustive guide below.

Click the ‘Download Your Guide’ button below to gain access to the full series on Outlook 2007, 2010 & 2013 and their infamous word rendering engines!

Outlook Isn’t Going Anywhere…

We broke up this topic into 4 in-depth chapters so you can achieve pixel perfection in this irksome client.

This guide consists of the following Outlook tutorials:

Be sure and comment below if you have any tips or tricks to make coding and designing emails for Outlook a wee bit less painful.

18 thoughts on “Seeing Gaps Between Your Images in Outlook 2013?”

  1. I’d be careful with step 4 simply because if you plan on making the email responsive, it’ll also apply the same height as what’s coded for the desktop.

  2. I’ve got an image inside a link first which itself is inside a table cell. Setting the line-height on the link and/or the table cell doesn’t seem to solve the problem. My guess, from looking at the code, is because a span has been inserted around the image which doesn’t inherit the line-height rule. Any ideas how I can fix this?

  3. I’m running into issues with extra space below and image with a link also. Initially I had a 22px space below showing in Outlook365 – after adding a style in the head to do margin:0 padding:0 and margin-bottom:0 important for p, span and a I’m now down to just a a two pixel gap below. Not sure what else I can do, I’ve applied every other Outlook fix.

  4. We’ve discovered an issue with this fix that had gone undiscovered for us until recently. It seems that in Windows if a user changes their “Display” settings from the default to a larger scale in the Control Panel, gaps will appear between images that are supposed to be touching each other in every version of Outlook (not just 2013). It appears that Windows scales the line-height to something greater than the height of the image. If we remove the Outlook 2013 fix things render normally in previous versions of Outlook.

    As there any way to have our cake and eat it too with people who use Outlook and those that adjust their Windows display? We haven’t been able to come up with a solution.

  5. Thank you. Outlook still render HTML using IE6/MSOffice engine and add all kind of messy code inside proper coded HTML. That’s the reason you see gaps. you solutions fix it! Thanks.

  6. If I have several rows, each would have an image, followed by a 2px tall horizontal line, whats the best way to code that for Outlook 2013? It shows up as ~15px tall, instead of 2px. I currently use this for the line:

    BTW, I also added a gif spacer but it didn’t work:

    Thanks Geoff!

    btw, thanks Evert for the earlier response!

  7. THANK YOU! This guide is a life saver.

    I have a couple of pages of tips and tricks I have collected that I will be happy to share. Too long to dump here though. Where can I send them?

  8. Please help, there is a little gap inbetwwen images in outlook2013, Please guide me.

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html >
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
    <title>Untitled Document</title>
    </head>
    <body>

    kevin
    CEO
    Head Office
    Phone: +1 000-000-000 ext 001 Fax: +1 000-000-000
    Email: kevinp@email.orghttp://www.mail.org

    </body>
    </html>

  9. problem with an email in Outlook where the table is 650px and I have columns of 320px and 320px that are images.

  10. The best current results come from a graphic header, a graphic footer and nothing but text in between.

    If you have to slice, always slice all the way across the entire width of the email, then within those slices break pieces down into nested tables. Uneven slice heights will break (usually in one or more of the dreaded Outlooks, 2003, 2007 2010 and 2013).

    Here is a brief version of my latest tips and tricks in the ongoing struggle with email coding.

    Use ONLY TABLES!!!

    NO!
    – DIV tags use SPAN with style=”display:block;”

    – MARGIN “margin” and “margin-top” are not supported in Outlook 2007/2010 and “margin-bottom” is but collapses in outlook.com

    inside of table

    tags

    Image code:
    style=”margin: 0; border: 0; padding: 0; display: block;”

    Center image:
    style=”margin: 0; border: 0; padding: 0; display: block; margin-left: auto; margin-right: auto;”

    Solid line:

    To specify a line-height use:

    To prevent Gmail and Hotmail from randomly writing link code where images are, give every image a different name: eg. bullet-1,jpg, bullet-2.jpg

    This table definition code works:

    Hope that helps someone.

    Charles

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies