HTML邮件嵌套表格布局在Outlook客户端出现行间距过大问题求助

问题原因 #

该空白问题由HTML代码不符合邮件客户端的严格渲染规范导致，核心错误点如下：

• 嵌套表格直接作为<tr>的子元素，没有用<td>包裹，Outlook对非法表格结构容错率极低，会自动生成空白节点填充错误结构
• 部分<img>标签未添加display:block样式，Outlook默认会给图片添加底部行高间距
• <p>标签未清除默认上下边距，Outlook预设的块级文本边距会额外拉大间距

修复方案 #

按照以下步骤修改即可解决问题：

1. 修正表格嵌套结构：所有子表格必须包裹在<td>标签内，禁止直接放在<tr>下
2. 全量图片样式统一：所有<img>标签都添加style="display:block;border:0"属性
3. 重置文本标签边距：所有<p>标签添加margin:0;padding:0行内样式清除默认边距
4. 可选优化：给仅包含图片的<td>添加style="line-height:0;font-size:0"，彻底避免行高产生的多余空白

核心错误代码修正示例 #

原错误的表格结构：

<tr>
    <!-- 子表格直接放在tr下，缺少td包裹 -->
    <table bgcolor="#70584b" width="620" align="center" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td bgcolor="#70584b" width="620" style="padding:0">
                <img width="620" src="https://mi.nestle.es/gallery/120725221210600168/211006_Nestle_Dark_Cupon_10.jpg" alt="Nescafé" style="display: block; border:0"/>
           </td>
       </tr>
     </table>
</tr>

修正后的结构：

<tr>
    <td>
        <table bgcolor="#70584b" width="620" align="center" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td bgcolor="#70584b" width="620" style="padding:0;line-height:0;font-size:0">
                    <img width="620" src="https://mi.nestle.es/gallery/120725221210600168/211006_Nestle_Dark_Cupon_10.jpg" alt="Nescafé" style="display: block; border:0"/>
               </td>
           </tr>
         </table>
    </td>
</tr>

p标签修改示例：

<p style="margin:0;padding:0;font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
    <span style="color:#efb952">XXXXXXXX</span>
</p>

内容的提问来源于stack exchange，提问作者javi-ur96