如何消除Outlook客户端中邮件营销分隔线的多余内边距/空白

针对你遇到的Outlook客户端分隔线下方出现额外空白的问题，结合你已添加mso-line-height-rule: exactly;的情况，以下是针对性修复方案：

核心问题分析 #

Outlook采用Word渲染引擎，对<div>元素的兼容性较差，即便设置了行高和高度，仍可能因引擎特性或隐藏字符（你代码中<div>内的零宽空格‌）产生额外空白。

具体修复步骤 #

• 替换分隔线实现方式：用<table>替代<div>制作分隔线，Outlook对表格渲染的兼容性远优于块级元素
• 清除隐藏字符：移除分隔线容器内的零宽空格等冗余字符
• 强化Outlook专属样式：添加mso-table-lspace:0pt; mso-table-rspace:0pt;消除表格默认间距，确保mso-line-height-rule: exactly;生效
• 精准控制间距：通过外层<td>的padding控制上下间距，避免内部元素产生额外高度

修改后的完整代码 #

<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
  <tr>
    <td align="center">
      <table class="container" cellpadding="0" cellspacing="0" role="presentation" bgcolor="#fdfdfd" width="700" style="border-collapse: collapse;">
        <tr>
          <td align="left" class="px-sm-20">
            <table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
              <tr>
                <th width="50" align="center" class="hide-sm" style="font-size:1px; line-height: 1px;">&nbsp;</th>
                <th class="col" width="600" align="left">
                  <table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
                    <tr>
                      <!-- 修复后的分隔线：用table替代div，添加Outlook专属样式 -->
                      <td class="divider" style="padding-top: 5px; padding-bottom: 20px; mso-line-height-rule: exactly;">
                        <table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                          <tr>
                            <td style="height:1px; line-height:1px; background: #5C5C5C; font-size:1px;">&nbsp;</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </th>
                <th width="50" align="center" class="hide-sm" style="font-family: 'Ambit', Arial, sans-serif; font-size:16px; line-height: 20pt;">&nbsp;</th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关键修改说明 #

1. 分隔线容器替换：将原<div>改为<table>，彻底规避Outlook对div的渲染异常
2. Outlook专属样式：在分隔线表格添加mso-table-lspace:0pt; mso-table-rspace:0pt;，消除表格单元格默认的左右间距
3. 精准高度控制：分隔线单元格设置height:1px; line-height:1px; font-size:1px;，配合mso-line-height-rule: exactly;强制高度生效
4. 清除冗余字符：移除原<div>内的零宽空格，避免额外高度占用

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