Tim Butterfield
Image Gap Fix in Outlook 365 Web App

The new Outlook 365 Web App creates a small 4-5px gap below every image. For email designers who use slices to create their email or spacer gifs this can cause a lot of layout problems. Unfortunately the Office 365 Web App strips out almost all styling other than width and height. Styles like display:block and other similar, CSS based fixes won't work.

There is some good news through, we can get around this by surrounding all images with div tags with the height style. Because div tags are naturally block elements, this removes the 4-5px gap from underneath the image.

Surround Image with Div

The div tag has a default block attribute. It is important to define the height of the div to ensure there are no gaps surrounding the image.

<div style="height:335px;"><img src="images/hero_image1.jpg" /></div>

Outlook 2013/2010, 2007 etc.

Unfortunately, adding this div creates problems in earlier versions on Outlook. This is easily fixed by hiding the div tags from these versions of Outlook.

<!--[if !mso]><!--><div style="height:335px;"><!--<![endif]-->
<img src="images/hero_image1.jpg" />
<!--[if !mso]><!--></div><!--<![endif]-->

Final Code Example:

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-color:collapse;">
  <tr>
    <td height="335">
      <a href="LINK" title="Link">
        <!--[if !mso]><!--><div style="height:335px;"><!--<![endif]-->
          <img src="images/hero_image1.jpg" width="600" height="335" alt="Hero Image" style="display: block; border-style:none;" border="0" />
        <!--[if !mso]><!--></div><!--<![endif]-->
      </a>
    </td>
  </tr>
</table>

Repeat this for every image that is causing issues and you will have a fully compatible Outlook Email.