Gap Under Images on Office 365 and Outlook.com

So it appears an update was shipped where Outlook.com/Office 365 introduced the ability to click on non-linked images to "view" them within the email as standalone assets, just like Gmail does.

In doing so, any non-linked image is wrapped with a <button> tag. All images - regardless if linked - are wrapped with <div style="display: inline-block;">.

A few recommendations:

1. Be sure to always set display: block; on your image tags (either inline or embedded CSS) if desired behavior
2. Link all images to avoid giving users the ability to view them within email client (just like Gmail) and remove the <button> functionality
3. If you wish to manipulate the <div style="display: inline-block;"> wrapper, then wrap the <img> tag in its own <div> with a class i.e.

<div class="owa">
<img src="img.jpg">
</div>

which gets processed by Outlook.com/Office 365 to:

<div class="x_owa">
<div style="display: inline-block;">
<img src="img.jpg">
</div>
</div>

and just target that <div> with CSS:

.owa div {
  display: block !important;
}

Put this in your head styles to resolve:

div,button { margin:0 !important; padding:0 !important; display:block !important; }

I found adding [office365] button {display: block !important; } in the style block, which will target Outlook.com only and override the style being injected, will resolve this.

Hi All,

I was reading about this during my morning commute.

Use this:
div{ display:block !important;}

I found this over at the monks feed.

Cheers

After looking into this a little bit, if your images are contained within table cells throughout your email, it seems like you can set the all the <td> tags to font-size: 0; in your <style> block in the header of the email. This will remove the space and can easily be overwritten by inlining font sizes when needed. Since I already inline all of my text formatting, this seems to be the easiest solution for me. I also haven't noticed any unwanted changes in any other email/Webmail client.

Has Outlook.com removed this 'feature' (as of 5/16/17)? I just tested an email in outlook.com and the non-linked images are no longer clickable and no longer pop up as a preview. Images are no longer being wrapped in a <div> and <button>.

Has anyone else experienced this?

Hi, I have the same problem... The only thing i found is that Office 365 and Outlook.com add a div with style inline-block arround the image... How to remove it, i haven't figured out...

Have you tried putting these inline codes on TD of the images: font-size: 0px; mso-line-height-rule: exactly; line-height: 0px;

Thanks to everyone who's posted on this thread, this update has been especially frustrating for me because it broke several different layouts I use. I found the solution for me was slightly different what others posted here. I also found that Safari on Mac for outlook.com / office365 required some extra code that firefox / chrome did not.

I had trouble targeting the <button> and <div> that outlook.com is adding. I'm using the spongy / hybrid coding method and I use Litmus to inline my CSS and since the <button> and <div> do not yet exist in the code I had to use a separate style tag with data-ignore-inlining to successfully target the offending code. The font-size and line-height were continuing to cause the gaps in my tests, so I ended up with this code where .enclosing-td-class is the class name of the parent <td> (I went this route instead of wrapping the image in another <div> as suggested by Kevin Mandeville):

<style data-ignore-inlining>
button { font-size: 0 !important; }
.enclosing-td-class div { display: block !important; }
</style>

I also had to set font-size and line-height to zero in the enclosing <td> tag to completely get rid of the gaps in all browsers.

I really appreciate the community here, I wouldn't have gotten this fixed without the great input from everyone else.

Last time I used this in early March, it worked for me:

<td align="center" valign="bottom" class="hide"><div style="height:HEIGHTpx; font-size:0;"><img src="YOUR-IMAGE-HERE" width="WIDTH" height="HEIGHT" align="textbottom" style="display: block; font-family:Arial,sans-serif; font-size:12px; line-height:16px; color:#333333; border-style:none; text-align:center;" border="0" class="hide" /></div></td>

Basically, I wrapped the IMG inside a DIV that has an inline style of "height:XXXpx; font-size:0". Then at the IMG level, style it so there's no border AND make sure to include attribute align="text bottom". Hope this still works.

Shameless plug in can anyone stumbles here. I found another solution that consists in adding an id that starts with OWATemporaryImageDivContainer on all your <img> tags. You can read more about this here.

Have you tried putting these inline codes on TD of the images: font-size: 0px; mso-line-height-rule: exactly; line-height: 0px;

Alright, so we know outlook.com adds a div (and a button if the image isn’t linked) around images.

That div inherits a font-size of 15px from somewhere in the outlook.com stylesheet:
._rp_o5 {
font-size: 15px;
}

Which result in a 4px empty space below the image. Which we don’t want, because some images should align against another element.

As a fix I thought I could create the reset:
div { font-size: 0;}

As all text in our code always has font sizes set this wouldn’t be a problem. However, the mail tool we’re working with adds a div around text if you click the alignment option in the editor <div style=“text-align: center;”> </div>.
So suddenly text that is centered disappears because the font-size is set to zero in the stylesheet. As the editor doesn’t add the font-size or line-height to that tag.

Is there anyway to only set the font-size to zero for divs that include an image? I googled but found no solutions.
Or maybe you guys know of a different way to target those specific divs and leave the others alone.

My team and I have run in to this issue as well. While we have found two methods of circumventing the issue, we do not understand why Outlook.com is now behaving this way.

In addition to the <div style="display:inline-block"> being applied, I also noticed that unlinked images are being wrapped in button tags. What's even more odd is some of the buttons in the same email are disabled while others are not.

Enabled:
<button type="button" class="_at_6 o365button" aria-labelledby="_ariaId_1170"><img src="…" alt="" width="600" height="168" class="x_hide" style="display:block; border:0"><span class="_fc_3 owaimg" style="display: none;"> </span><span class="_fc_4 o365buttonLabel" id="_ariaId_1170" style="display: none;"></span></button>

Disabled:
<button type="button" class="_at_6 o365button" aria-disabled="true" aria-labelledby="_ariaId_1177" disabled="true"><img src="…" alt="" width="600" height="49" class="x_hide" style="display:block; border:0"><span class="_fc_3 owaimg" style="display: none;"> </span><span class="_fc_4 o365buttonLabel" id="_ariaId_1177" style="display: none;"></span></button>

Very strange.

Hi Grégory,

I have try to resolve your challenges, kindly use below code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans titre</title>
<style>
    div {
        line-height:0px !important; 
    }
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFF00"><img src="http://test.badsender.com/BADSENDER/R&D/images/visuel_01.jpg" width="600" height="400" border="0" style="display:block; font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#000" alt="test01"></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><img src="http://test.badsender.com/BADSENDER/R&D/images/visuel_03.jpg" width="600" height="200" border="0" style="display:block;"></td>
</tr>
<tr>
<td bgcolor="#FF00FF"><img src="http://test.badsender.com/BADSENDER/R&D/images/visuel_02.jpg" width="600" height="400" border="0" style="display:block;"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

let us know any other queries,

Thanks
Kevin