2 Fixes for Image Spacing in Outlook Web App (Office 365)
The Problem: Outlook Web App Image Gaps
As you might know from our earlier blog, Outlook Web App didn’t make a great first impression. Because of the enforced HTML5 doctype, the Office Web App (OWA) creates a small 4-5px gap below every image. For email designers who use sliced images to create their email, this can cause a lot of problems. If you favor spacer gifs, these tiny gaps can cause a lot of annoyance. Because OWA strips out almost all styling other than width and height, display:block and other similar, CSS based fixes won’t work.
Let’s take an image that has been sliced into 3 parts, which should stack seamlessly on top of each other. In OWA, the images will come out looking like this:
Here’s the code we used to create this email:
<table align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img src="image.jpg" border="0"/>
</td>
</tr>
<tr>
<td>
<img src="image.jpg" border="0"/>
</td>
</tr>
<tr>
<td>
<img src="image.jpg" border="0"/>
</td>
</tr>
</tbody>
</table> Fix #1: Use the Align Attribute
Back in 2010 we blogged about 12 Fixes for Image Spacing in HTML Emails, but to our surprise only one actually worked in OWA. The rest are defeated by OWA stripping styles out. From that article, our remaining way to solve the image gap problem is to apply align="left" or align="right" to the image itself. You’ll also want to add style=”margin:0″ to prevent this fix from messing things up in Thunderbird. Check out the code below:
<table align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img src="image.jpg" align="left" border="0" style="margin:0" />
</td>
</tr>
<tr>
<td>
<img src="image.jpg" align="left" border="0" style="margin:0"/>
</td>
</tr>
<tr>
<td>
<img src="image.jpg" align="left" border="0" style="margin:0"/>
</td>
</tr>
</tbody>
</table> Fix #2: Wrap Your Image in a Div
OWA won’t allow you to apply styles to your images (or seemingly any other element) other than a few basics, as well as width and height. Luckily for us, that’s all we need for this second fix. Because the div is already a block level element, it can simulate the display:block property. The important part is to give the div the appropriate height. This will remove the unwanted gap below each image. Just make sure that the height of the div is equal to the height of the image it contains.
Note: This fix may cause issues in Outlook 07/10/13 if the div is converted to a paragraph. We tested this fix and found no problems, but Outlook is a finicky beast.
<table align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div style="height:129px">
<img src="image.jpg" border="0" />
</div>
</td>
</tr>
<tr>
<td>
<div style="height:143px">
<img src="image.jpg" border="0"/>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:134px">
<img src="image.jpg" border="0"/>
</div>
</td>
</tr>
</tbody>
</table> Now our heroes are whole once again!
Have you found another fix for this problem? Let us know in the comments below!
Author: Kyle Lapaglia
Author: Kyle Lapaglia
34 thoughts on “2 Fixes for Image Spacing in Outlook Web App (Office 365)”
Comments are closed.
Outlook 2013 puts a similar gap between some of the tables in my code. Is it a similar fix?
Could you provide a link to the Outlook Web App? I assumed you meant Outlook.com. But I just checked some of my emails sent there and a simple style=”display:block;” on my img tags was all I need to prevent the spacing issue. Maybe I’m missing something here?
Nevermind! Ignore my last comment! Figured it out. 🙂
@Keith,
No, it’s probably not a similar fix. These fixes work because of how those elements interact with the HTML5 doctype. You might want to check out this blog: https://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010 or this one https://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010.
Wrapping in a DIV with specified height and adding align=”left” fixed my issue. Thank you!
@Keith,
I like being surprised! Good to know!
Sometimes I use this rule when I see that happening to images in tables.
(issue looks just like the screenshots from the article)
img {vertical-align: bottom;}
I learned about the reasons for this from the site and comment below:
http://www.sitepoint.com/forums/showthread.php?622394-remove-image-padding-in-table-td-cell
“Images by default generate inline boxes. Inline boxes are by default aligned so that the text baselines line up. An image doesn’t have a baseline, so the bottom of the image box will align against the text baseline of the cell. The baseline is always a few pixels above the bottom of the cell box, to leave room for the descenders of lowercase letters like ‘g’ and ‘y’.
Therefore, there will be a gap between the bottom of the image and the bottom of the cell if you use the default settings. “
I sometimes float the images to resolve this, as OL 03,07,10 support float….sometimes.
Also try adding height to your td (that contains the img), that is less than your img height.
I used the fixes above, which put back the images together fine in OWA… but for some reason it then broke the email in regular desktop outlook!
Has anyone experienced that?
I also have found that this fix caused image gaps to appear in outlook 2010 on the pc (while being fine in everything else including 365). Tried both the
Anyone else found this to be a problem
Does anyone know how to add an image to an email signature on outlook web app. I am going crazy trying to figure it out.
I was able to upload my image to photobucket, resize, and copy and paste the image under my signature. I see it on my end when I send emails out, but the recipients see just a small blank box.
HELP
Your work shows satisfaction by this blog, you are a wise author.
After some testing, I have concluded any time you have a table containing 1 row, 1 cell and 1 image… make sure it is 20px. Otherwise you will start to have issues with extra space.
These work great until you put a link tag on the image, then a 2px gap shows back up under the linked images.
Add the height=”?” style=”font-size:0; line-height:0;” to the
THANKS!!! This fixed the biggest headache of my life!!!
Thank you so much – I was breaking my head over that one.
Awesome! That align solution solved my issues in Office 365. Was driving me crazy. Thanks a ton.
Ok aligment is working in my situation. I cutted image in to few peaces, in one row I have cell with image, then cell with text, and then next cell with image.
I just found solution. There was a text issue, I don’t know why but 33px height cell for two lines of 11px text and line-height:12px; was to thin for Office 365, now cell is 42px; and it looks fine. It look like Ofiice 365 add a much biger line-height than in style, or add empty line (it was almost 3rd line in 2 text lines). I was removing and adding
but it won’t help. But now it’s ok, maybe it will help someone.
@digooders: I’ve found the same issue. Using either method described above fixes the spacing for OWA–but then it distorts/causes the breaks to happen in Outlook 2010. Did you happen to find a solution?
I just had an issue with spacing under the image in Outlook (365 down to 2007 – tested in Litmus).
I tried the methods above, but they didn’t help, that I did find is that the
Hope this helps somebody 🙂
the div tag around my image and setting the height worked for me. I lost so much hair on this one…hopefully just the gray ones though.
KUDOS to Email on Acid…….. Microsoft can go jump off a bridge as far as im concerned.
thanks!!! after days testing a lot of posibilities, one finally worked!
But for responsive emails we can’t set the height to be fixed!? what will be the solution in that case!?
I have two images in a banner seperated as shop for men and shop for women!
When placing two images I can see a 2px gap in one of the image!
I gave display block to the image and also for anchor tag and nothing works! 🙁
Can you suggest some other fix!?
Siva,
I’m not sure without being able to see the code. I’d suggest that you make a post on our forum and include your code sample, and we’ll take a look.
So, for anyone else looking to solve this issue,
instead of wrapping the content in a div, you can just set what ever the immediate parent is to ‘display:block;’ if its an anchor tag or a TD or what ever.
Also, rather than setting a static height, you can also set max-height to the height of the image. If your email has to be responsive and the height has to scale, this will save you some headache of setting up classes for it.
Thanks mcneela86, it works with
The
and in the media query set ImgHeight
.ImgHeight {
height: auto !important;
}
I had a similar issue as Siva. The left align didn’t seem to work for me. If you add
thanks!
Fix #1 did not work for me, still had the white line in Outlook web app tests. Fix #2 removed the white line in Outlook web apps, but broke the layout in desktop Outlook (spliced images were side by side rather than stacked) and caused a big gap to appear between the splices on mobile devices, including iPhones. I had success with my third attempt using Robert B’s method in comments above. Added display:block to style in parent TD tag, and added max-height to the styles of both images, matching the height of each GIF. All platforms look great.
Simpler fix,
add this to the top of your style tag
div, button {
margin: 0!important;
padding: 0!important;
display: block!important;
}
Outlook doesn’t display my main image flush to the bottom edge of the purple background section and instead produces a gap below it.
Here is the code for that section:
Any suggestions how I can fix this for outlook?
Thank you so much for this fix! You are a life saver.