Outlook邮件标题与正文间莫名间距问题求助

测试邮件营销活动时发现：所有Outlook版本里，邮件标题与正文段落间的间距出现翻倍异常，但单独浏览器窗口中排版正常；Gmail、Apple Mail及移动端等其他邮件客户端显示均无问题。已尝试使用ghost tables、移除代码中的<p>标签等方法，均未解决问题。

相关代码片段：

<table style="width: 100%;" cellspacing="0" cellpadding="0">
    <tr>
        <th style="width: 50%; padding-left: 30px; padding-right: 0px;" class="responsive-td" valign="top">
            <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; "
                class="stylingblock-content-wrapper">
               
              <tr>
                                <td align="left"> 
                                    <span style="font-size:18px;padding: 18px 30px 0px;"><table border="0" cellpadding="0" cellspacing="0" width="100%"; style="padding: 18px">
 
  <tr>
   <td>
    <span style="font-size:22px; line-height: 140%; padding: 30px 0px;"><b>This is a test headline</b></span></td></tr><tr>
   <td>
    <p style="line-height: 120%;"> 
      <span style="font-size:14px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam massa, elementum quis risus pretium, tempor tristique justo. Quisque malesuada, ex eget varius iaculis, sem metus fermentum enim, vel feugiat sem orci vitae neque. Cras vulputate ante in dolor consequat ullamcorper nec eget elit.</span></td></tr></table></span></p>
 
                                </td>
                            </tr>
              
            </table>
        </th>
        <th style="width: 50%; padding-left: 0px;" class="responsive-td" valign="top">
            <table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; "
                class="stylingblock-content-wrapper">
                <tr>
                    <td style="padding: 18px 30px 0px; " class="stylingblock-content-wrapper camarker-inner">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          
                          
                           <tr>
                    <td class="stylingblock-content-wrapper camarker-inner">
                        <table cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tr>
                                <td align="left">
                                    <img data-assetid="65628"
                                        src="https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fHww&w=1000&q=80"
                                        style="display: block; padding: 0px; text-align: left; height: auto; width: 100%; border: 0px none transparent;"
                                        width="300"><p style="line-height: 100%;">
     <span style="font-size:12px;"></span></p><p style="line-height: 100%;">
     <span style="font-size:12px;"><em>This is a subheading.</em></span></p><p></p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                          
                            
                        </table>
                    </td>
                </tr>
            </table>
        </th>
    </tr>
</table>

可行解决方案 #

1. 清理冗余嵌套与标签 #

代码里存在多层不必要的<span>、<p>嵌套，Outlook会给这些标签自动加默认边距。直接简化结构，用表格单元格的padding控制间距，不要依赖<p>或<span>的padding：

<!-- 简化后的标题+正文模块 -->
<table style="width:100%;" cellspacing="0" cellpadding="0">
  <tr>
    <td style="padding:30px 0 18px 0;">
      <span style="font-size:22px; line-height:140%; font-weight:bold;">This is a test headline</span>
    </td>
  </tr>
  <tr>
    <td style="line-height:120%;">
      <span style="font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam massa, elementum quis risus pretium, tempor tristique justo. Quisque malesuada, ex eget varius iaculis, sem metus fermentum enim, vel feugiat sem orci vitae neque. Cras vulputate ante in dolor consequat ullamcorper nec eget elit.</span>
    </td>
  </tr>
</table>

2. 给Outlook添加专属样式重置 #

Outlook基于Word渲染引擎，支持mso-line-height-rule属性，同时可以强制重置<p>标签的默认margin：

<p style="line-height:120%; margin:0 !important; mso-line-height-rule:exactly;">
  <span style="font-size:14px;">正文内容</span>
</p>

这个样式会强制Outlook忽略<p>标签的默认上下边距，同时确保行高精准生效。

3. 用表格单元格完全替代段落标签 #

这是邮件兼容的通用方案——所有文本内容都放在表格的<td>内，通过<td>的padding控制上下间距：

• 标题所在<td>设置padding-bottom:18px（你需要的标题与正文间距）
• 正文所在<td>不设置上下padding，避免额外间距叠加

4. 清理重复的padding设置 #

你的代码中<span>和<table>都设置了padding，Outlook会叠加这些值。比如标题的<span>有padding:30px 0px，外层<span>还有padding:18px 30px 0px，这些都会被Outlook解析为额外间距，只保留最外层容器的padding即可。

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