html - Microsoft Outlook Adding Gaps Above & Below Image in Email - Stack Overflow

admin管理员组

文章数量:1414628

I'm currently working on an HTML email template and running into an issue where Microsoft Outlook (365, Version 2412 2025) 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 <td> without gaps?

Example

<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=".png" width="80" alt="Logo" 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=".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 <img> tag.
• Wrapping the image in a full-height <table> inside the <td>.
• Using height="100%" on the image and parent <td>.
• Explicitly setting padding: 0; margin: 0; border-spacing: 0; border-collapse: collapse.

本文标签： htmlMicrosoft Outlook Adding Gaps Above amp Below Image in EmailStack Overflow