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

34

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:

Types of internet browsers

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!

Internet browser heroes

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)”

  1. Outlook 2013 puts a similar gap between some of the tables in my code. Is it a similar fix?

  2. 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?

  3. Wrapping in a DIV with specified height and adding align=”left” fixed my issue. Thank you!

  4. 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. “

  5. 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.

  6. 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?

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

    wrap and the alight left independently. The images in question did have a link on them?

    Anyone else found this to be a problem

  8. 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

  9. 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.

  10. These work great until you put a link tag on the image, then a 2px gap shows back up under the linked images.

  11. Add the height=”?” style=”font-size:0; line-height:0;” to the

    for any images under 20px high. This will fix outlook 2013 image issue.
  12. Awesome! That align solution solved my issues in Office 365. Was driving me crazy. Thanks a ton.

  13. 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.

    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?
  14. 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.

  15. @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?

  16. 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

    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 🙂

  17. 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.

  18. 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!?

  19. 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.

  20. 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.

  21. The

    method works… for responsive just add a style to the div

    and in the media query set ImgHeight
    .ImgHeight {
    height: auto !important;
    }

  22. I had a similar issue as Siva. The left align didn’t seem to work for me. If you add

    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!

  23. 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.

  24. Simpler fix,

    add this to the top of your style tag
    div, button {
    margin: 0!important;
    padding: 0!important;
    display: block!important;
    }

  25. 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?

Comments are closed.