Microsoft Outlook Adding Gaps Above & Below Image in Email

[ThomasBowers]

Hi Everyone,

I'm currently working on an HTML email template and running into an issue where Microsoft Outlook adds unwanted gaps above and below an image (Property Image) inside a table. The image is supposed to fit the full height of its table cell, but in Outlook, there’s extra spacing around it.

A gaps appears above & below the image, even when padding: 0; margin: 0; is applied. Other email clients render it correctly.

My code is below, any ideas how can I force Outlook to make the image (Property Image) fill the full height of its without gaps?

Thanks in advance!

<table align="center" border="0" cellpadding="0" cellspacing="0" class="mktoModule" id="DarkBlueRightImageLeftContent" mktoName="Dark Blue Right Image Left Content" style="width:600px; border-spacing: 0; border-collapse: collapse;" width="600" bgcolor="#000759"> 
  <tbody> 
    <tr> 
      <!-- Left Content -->
      <td valign="top" style="padding: 20px; font-family: 'Open Sans', Arial, sans-serif; color: #FFFFFF; width: 60%; vertical-align: top;"> 
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; border-collapse: collapse;">
          <tr>
            <td>
              <img src="https://placehold.co/80x30.png" width="80" alt="Colliers" style="display: block;">
            </td>
          </tr>
          <tr>
            <td height="20"></td>
          </tr>
        </table>

        <table border="0" cellspacing="0" cellpadding="0" style="background-color: #1C54F4; border-spacing: 0; border-collapse: collapse;"> 
          <tbody> 
            <tr> 
              <td style="padding: 5px 10px; font-size: 12px; font-weight: bold; color: #FFFFFF; font-family: 'Open Sans', Arial, sans-serif;"> 
                <div class="mktoText" id="ReferenceNumber1_3A" mktoName="Reference Number">
                  TO LET
                </div> 
              </td> 
            </tr> 
          </tbody> 
        </table> 

        <div class="mktoText" id="PropertyTitle3_3A" mktoName="Property Title 3" style="font-size: 22px; font-weight: light; margin-top: 10px;">
          Premier core London office investment
        </div> 
        <div class="mktoText" id="Location3_3A" mktoName="Property Location 3" style="font-size: 16px; color: #C3E6FF; margin-top: 5px;">
          Location Placeholder Postcode
        </div> 
      </td> 

      <!-- Property Image -->
      <td valign="top" style="padding: 0; width: 40%; border-spacing: 0; border-collapse: collapse;"> 
        <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" style="border-spacing: 0; border-collapse: collapse;">
          <tr>
            <td valign="top" style="line-height: 0; font-size: 0;">
              <img class="mktoImg" id="PropertyImage5_3A" src="https://placehold.co/250x300.png" width="100%" height="100%" alt="Property Image" mktoName="Property Image 5" style="display: block; line-height: 0; font-size: 0;">
            </td>
          </tr>
        </table>
      </td> 
    </tr> 
  </tbody> 
</table>

Things I've tried:

• Setting line-height: 0; font-size: 0; display: block; on the tag.
• Wrapping the image in a full-height inside the .
• Using height="100%" on the image and parent .
• Explicitly setting padding: 0; margin: 0; border-spacing: 0; border-collapse: collapse.

[SanfordWhiteman]

Please include screenshots as they make things much clearer.

Do you mean this gap, which is from the outer padding?

[ThomasBowers]

Thanks Sanford, 

There should be padding on the left column (Text, logo, etc) of the table, but none on the right column. Any ideas how I should amend the html?