如何缩减HTML邮件有序列表数字与文本的间距（Outlook兼容）

针对Outlook客户端（基于Word渲染引擎）对原生有序列表的兼容性问题，结合你提到的不能使用负边距、伪元素，且需保证移动端排版正常的限制，推荐以下两种可靠方案：

方案一：调整原生有序列表的Outlook专属样式 #

利用微软私有CSS属性和兼容样式缩小默认间距：

<table align="center" border="0" cellpadding="0" cellspacing="0" width="63%" class="list">
  <tr>
    <td style="text-align: center;" class="listpad">
      <div style="color: #323840; font-family: 'Inter-Medium','Inter', Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: -0.25px; line-height: 24px; text-align: left;">
        <ol style="margin-left: 20px; padding-left: 0; mso-list: l0 level1 lfo1;">
          <li style="margin-left: 0; padding-left: 5px; list-style-type: decimal; mso-list-padding-left: 0;">Click the blue circle with the question mark icon.</li>
          <li style="margin-left: 0; padding-left: 5px; list-style-type: decimal; mso-list-padding-left: 0;">Select Contact Us from the menu.</li>
          <li style="margin-left: 0; padding-left: 5px; list-style-type: decimal; mso-list-padding-left: 0;">Click on Live Chat.</li>
        </ol>
      </div>
    </td>
  </tr>
</table>

关键说明：

• mso-list和mso-list-padding-left是Outlook专属属性，用于覆盖默认列表内边距
• 缩小margin-left并设置padding-left控制数字与文本的间距
• 保留list-style-type: decimal确保数字样式正常

方案二：用表格模拟有序列表（最可靠，全客户端兼容） #

邮件开发中常用表格实现自定义列表，完全控制间距且避免移动端排版问题：

<table align="center" border="0" cellpadding="0" cellspacing="0" width="63%" class="list">
  <tr>
    <td style="text-align: center;" class="listpad">
      <div style="color: #323840; font-family: 'Inter-Medium','Inter', Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: -0.25px; line-height: 24px; text-align: left;">
        <!-- 列表项1 -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td style="width: 20px; padding-right: 8px; text-align: right;">1.</td>
            <td style="padding: 0;">Click the blue circle with the question mark icon.</td>
          </tr>
        </table>
        <!-- 列表项2 -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 8px;">
          <tr>
            <td style="width: 20px; padding-right: 8px; text-align: right;">2.</td>
            <td style="padding: 0;">Select Contact Us from the menu.</td>
          </tr>
        </table>
        <!-- 列表项3 -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 8px;">
          <tr>
            <td style="width: 20px; padding-right: 8px; text-align: right;">3.</td>
            <td style="padding: 0;">Click on Live Chat.</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

关键说明：

• 每个列表项用独立表格实现，数字列设置固定宽度和右对齐，通过padding-right精确控制与文本的间距
• 列表项间用margin-top控制行间距，匹配原生列表的视觉效果
• 表格布局在移动端自动自适应，文本始终与数字保持同一行，不会出现换行到数字下方的问题

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