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:
- 17 Must-Know Tricks for Outlook 2007, 2010 and 2013
- 3 Ways to Remove Unwanted Gaps between Tables in Outlook 2007 and 2010
- Fixing Gaps between Your Images in Outlook 2013
- CSS Padding in Outlook 2007 and 2010
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.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
18 thoughts on “Seeing Gaps Between Your Images in Outlook 2013?”
Comments are closed.
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.
Thanks for this. Saved me from tearing out what little hair I have left.
@aj2012 you can overwrite this with height:auto !important in a media query.
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?
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.
Thank you for this! We spent hours trying to figure it out and the culprit was a 9px high image. Great fix!
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.
Thank you so much! I was struggling with the gaps in Outlook 2013.
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.
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!
Thank you so much! T_T It finally works well!!!
thanks for this.
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?
Hey Charles,
We would love it if you sent us some tips and tricks 🙂 If you go to https://www.emailonacid.com/contact you can submit your tips for us there!
OK sent through the contact page – let me know if there was anything useful there that you hadn’t seen before.
Please help, there is a little gap inbetwwen images in outlook2013, Please guide me.
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>Untitled Document</title>
</head>
<body>
CEO
Head Office
Phone: +1 000-000-000 ext 001 Fax: +1 000-000-000
Email: kevinp@email.orghttp://www.mail.org
</body>
</html>
problem with an email in Outlook where the table is 650px and I have columns of 320px and 320px that are images.
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
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