HTML邮件模板中margin-left间距在Outlook中失效问题求助

Outlook采用Microsoft Word的渲染引擎解析HTML邮件，对部分CSS属性支持有限，margin-left这类用于inline元素（如span）的间距样式会被直接忽略。以下是几种可靠的替代方案：

方案1：使用HTML表格布局（最稳定） #

表格是Outlook邮件布局的黄金标准，渲染效果一致。用表格列宽度控制间距：

<table style="border-collapse: collapse;">
  <tr>
    <td style="padding: 0;">myText</td>
    <td style="width: 400px; padding: 0;"></td>
    <td style="padding: 0;">myText</td>
    <td style="padding: 0;">myText</td>
  </tr>
</table>

替换原模板中<p class=MsoNormal>部分即可，完整修改后的模板示例：

<html xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:w="urn:schemas-microsoft-com:office:word"
      xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
      xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
      xmlns="http://www.w3.org/TR/REC-html40">

<head>
    <meta http-equiv=Content-Type content="text/html"; charset="UTF-8">
    <style>
       
    </style>
</head>

<body lang=DE link=blue vlink=purple style='tab-interval:35.4pt;word-wrap:break-word'>
    <div class=WordSection1>        
      <table style="border-collapse: collapse;">
        <tr>
          <td style="padding: 0;">myText</td>
          <td style="width: 400px; padding: 0;"></td>
          <td style="padding: 0;">myText</td>
          <td style="padding: 0;">myText</td>
        </tr>
      </table>
    </div>
</body>
</html>

方案2：使用Outlook专属制表位样式 #

利用Word的mso样式定义制表位，通过制表符	触发间距：

1. 在<style>标签中添加：

.MsoNormal {
  mso-tab-count: 1;
  mso-tab-stop: 300pt; /* 400px≈300pt，Outlook对pt支持更稳定 */
}

2. 修改段落内容：

<p class=MsoNormal>
  <span lang=EN-US style='mso-ansi-language:EN-US'>
    myText&#9;myText myText
  </span>
</p>

方案3：使用非断空格（适合小间距） #

如果间距要求不精确，可直接用多个 替代，但仅适合短间距场景：

myText        myText myText

注意事项 #

• Outlook优先识别内联样式，尽量避免依赖内部/外部样式表
• 测试时务必在Outlook桌面版、网页版分别验证显示效果
• 复杂布局优先选择表格，这是兼容所有Outlook版本的最优方案

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