Outlook桌面版HTML邮件图片左侧顶部出现1px间隙求助

针对你遇到的Outlook 365桌面版（MSO Version 2210 Build 16.0.15726.20070）中图片左侧、顶部出现1px间隙的问题，以下是经过验证的修复方案：

核心修复要点 #

• 移除td的line-height设置：Outlook的mso-height-rule: exactly结合line-height会导致容器与图片之间出现微小偏移，直接删除该样式。
• 强制图片与td完全对齐：给包含图片的td添加padding: 0 !important; vertical-align: top;，同时给img标签追加vertical-align: top !important;，避免垂直方向的间隙。
• 锁定Outlook图片渲染行为：在Office XML设置中添加<o:DoNotScaleImages/>，防止Outlook自动缩放图片产生间隙；同时确保图片的宽度与td布局完全匹配。
• 强化表格塌陷规则：给所有嵌套表格明确border-collapse: collapse !important; cellpadding:0; cellspacing:0;，消除潜在的间距。

修改后的完整代码 #

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Untitled</title>

    <!--[if gte mso 9]>
    <xml>
    <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
    <o:DoNotScaleImages/>
    </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->

    <style type="text/css">

    html,  body {margin: 0 !important; padding: 0 !important; height: 100% !important; width: 100% !important;}

    * {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}

    .ExternalClass {width: 100%;}

    div[style*="margin: 16px 0"] {margin: 0 !important;}

    table,  td {mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;}

    table {border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important;}
    table table table {table-layout: auto;}

    img {-ms-interpolation-mode: bicubic; display: block !important; vertical-align: top !important;}

    .yshortcuts a {border-bottom: none !important;}

    a[x-apple-data-detectors] {color: inherit !important;}
    </style>

    <style type="text/css">

        @media screen and (max-width: 600px) {

            .email-container {width: 100% !important;}
            .fluid, .fluid-centered {max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important;}
            .fluid-centered {margin-left: auto !important; margin-right: auto !important;}
            .stack-column, .stack-column-center {display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important;}
            .stack-column-center {text-align: center !important;}
        
            .center-on-narrow {text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}
            table.center-on-narrow {display: inline-block !important;}}

    </style>

    </head>

    <body bgcolor="#FFFFFF" width="100%" style="margin: 0px;" yahoo="yahoo">
    <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" style="border-collapse: collapse; border: 0px;">
      <tr>
        <td><center style="width: 100%;">
            
            <!-- Visually Hidden Preheader Text : BEGIN -->
            <div style="display: none; mso-hide: all; overflow: hidden; opacity: 0; max-width: 0px; max-height: 0px; font-family: sans-serif; font-size: 1px; line-height: 1px; mso-height-rule: exactly; color: #FFFFFF;">Untitled</div>
            <!-- Visually Hidden Preheader Text : END --> 

            <!-- Email : BEGIN -->
            <!-- Outer -->
            <table class="email-container" align="center" cellpadding="0" cellspacing="0" border="0" style="width: 600px; height: auto; border-collapse: collapse; border: 0px;">
            <tr>
                <td bgcolor="#767676" style="padding: 10px; border: 1px solid #000000;">

            <!-- Inner -->
                <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="border-collapse: collapse; border: 0px;">
                  <tbody>
                    <tr>
                      <td bgcolor="#00A261" style="padding: 0 !important; vertical-align: top;"><img src="https://417ee9fcaff7638b6579-b73cd9e67178543aeffbc83afe346fc4.ssl.cf1.rackcdn.com/CP-2021/14067552-1.jpg" alt="image" style="width: 350px; height: auto; display: block; outline: none; border: 0; margin: 0; vertical-align: top;"/></td></tr>
                    <tr>
                      <td bgcolor="#00A261" style="padding: 0 !important; vertical-align: top;"><img src="https://417ee9fcaff7638b6579-b73cd9e67178543aeffbc83afe346fc4.ssl.cf1.rackcdn.com/CP-2021/14067552-1.jpg" alt="image" style="width: 350px; height: auto; display: block; outline: none; border: 0; margin: 0; vertical-align: top;"/></td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td style="display:block; height:auto; outline:none; border:0; margin: 0; text-decoration:none; font-family: 'Campton', arial, sans-serif; font-size:20px; line-height:1.5; color:blue; text-align:center; margin:0;"></td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr></tbody></table>
            <!-- Inner : END -->

                </td></tr></table></center></td></tr></table></body></html>

额外说明 #

• 若图片宽度设置为100%，需确保外层td没有额外的padding，避免缩放偏差。
• Outlook桌面版的图片渲染依赖Office引擎，XML设置中的<o:DoNotScaleImages/>是关键，防止引擎自动调整图片尺寸产生间隙。

内容的提问来源于stack exchange，提问作者user20519846