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.

[Disha_Goyal6 · Accepted solution]

Hi @ThomasBowers, I have modified your code. 

<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="font-family: 'Open Sans', Arial, sans-serif; color: #FFFFFF; width: 60%; vertical-align: top;">
<table>
<tr>
<td style="font-family: 'Open Sans', Arial, sans-serif; color: #FFFFFF; padding:20px; vertical-align: top;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="https://placehold.co/80x30.png" width="80" alt="Colliers" style="display: block;"></td>
</tr>
<tr><td height="20" style="font-size:1px; line-height:1px;">&nbsp;</td></tr>
<tr>
<td> 
<table border="0" cellspacing="0" cellpadding="0" style="background-color: #1C54F4; border-spacing: 0; border-collapse: collapse;"> 
<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> 
</table> 
</td>
</tr>
<tr>
<td style="font-size: 22px; font-weight: light; padding-top: 10px;font-family: 'Open Sans', Arial, sans-serif;color: #FFFFFF;"><div class="mktoText" id="PropertyTitle3_3A" mktoName="Property Title 3" >Premier core London office investment</div></td>
</tr>
<tr>
<td style="font-size: 16px; font-weight: light; padding-top: 5px;font-family: 'Open Sans', Arial, sans-serif; color:#C3E6FF;" ><div class="mktoText" id="Location3_3A" mktoName="Property Location 3">Location Placeholder Postcode</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</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>

Please check and let me know if this works for you.

Thanks,

Disha 

[ThomasBowers]

This worked! Thank you very much.

Did you wrap the image in another table?

[Disha_Goyal6]

Hi @ThomasBowers , I wrapped the content in another table. And, instead of giving padding to parent td.. I have given the padding to inner table td. 

[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?

[SanfordWhiteman]

Outlook doesn’t like padding on <td> nor on raw <div>s. Stick to padding on <table> elements.