Click to Sign Up for a 7 Day Free Trial!

Email Development

2 Fixes for Image Spacing in Outlook Web App (Office 365)

Email On Acid

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!

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

Outlook 2013 puts a similar gap between some of the tables in my code. Is it a similar fix?
Keith
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?
James
Nevermind! Ignore my last comment! Figured it out. smile
James
@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: http://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010 or this one http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010.
Geoff Phillips
Wrapping in a DIV with specified height and adding align="left" fixed my issue. Thank you!
Keith
@Keith,
I like being surprised! Good to know!
Geoff Phillips
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. "
Julie
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.
blake
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?
Jenna Patrick
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 <div> wrap and the alight left independently. The images in question did have a link on them?

Anyone else found this to be a problem
digooders
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
Mia
Your work shows satisfaction by this blog, you are a wise author.
guntrustinfo.com
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.
Keith Miller
These work great until you put a link tag on the image, then a 2px gap shows back up under the linked images.
Tobias
Add the height="?" style="font-size:0; line-height:0;" to the <td> for any images under 20px high. This will fix outlook 2013 image issue.
Peter
THANKS!!! This fixed the biggest headache of my life!!!
ihatesushi
Thank you so much - I was breaking my head over that one.
Nel
Awesome! That align solution solved my issues in Office 365. Was driving me crazy. Thanks a ton.
DBP
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. <div> and align method is not working there, and there is no problem with text size, only Office 365 has this problem, even Outlook.com and Outlook 2013 is working perfect, do you have any idea?
Grzegorz
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.
Grzegorz
@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?
Sarbearknock
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 <td> containing the image had a font-size of 15px on it - I set the font-size to 0 and it fixed the issue I was having.

Hope this helps somebody grin
mcneela86
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.
madscientest
thanks!!! after days testing a lot of posibilities, one finally worked!
jair
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
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.
Geoff Phillips
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.
Robert B.
Thanks mcneela86, it works with <td> font-size: 0 !!!
Larissa
The <div style="height:129px"> method works... for responsive just add a style to the div
<div style="height:129px" class="ImgHeight">

and in the media query set ImgHeight
.ImgHeight {
height: auto !important;
}
Steve
I had a similar issue as Siva. The left align didn't seem to work for me. If you add <div style="height:?px;"> it keeps the cell that size even when the images resize in mobile to be much shorter, creating large gaps. Is there a way to specify differently for mobile, or to just callout the outlook web app in the div tags?

thanks!
roxy
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.
Kristen

Leave a Comment