Outlook中HTML邮件元素定位及左右边距问题求助

一、消除左右小边距 #

Outlook（Windows端）用Word引擎渲染邮件，默认会给内容添加隐形边距，且不识别body的margin/padding属性，必须用嵌套表格强制消除：

1. 给body设置基础样式（兼容主流邮箱），同时用100%宽度的外层表格包裹所有内容，设置表格的cellpadding="0"、cellspacing="0"、border="0"，并添加MSO专属属性消除表格间距：

<body style="margin: 0; padding: 0; mso-line-height-rule: exactly;">
  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
    <tr>
      <td>
        <!-- 所有邮件内容放在这个td里 -->
      </td>
    </tr>
  </table>
</body>

2. 确保所有内部表格也设置border-collapse: collapse和MSO间距属性，避免出现意外留白。

二、白色矩形固定到邮件底部 #

Outlook完全不支持position: absolute/fixed，必须用表格布局的垂直结构实现底部定位：

方案1：底部矩形作为邮件最后一行（推荐，兼容性最好）

把底部白色矩形作为整个邮件表格的最后一行，自然贴靠底部，无需复杂定位：

<!-- 外层100%高度表格，确保占满邮件视口 -->
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
  <!-- 邮件主体内容区 -->
  <tr>
    <td valign="top">
      <!-- 你的邮件正文内容 -->
      <p>{{ email_content }}</p>
    </td>
  </tr>
  <!-- 底部白色矩形区 -->
  <tr>
    <td valign="bottom" style="background-color: #ffffff; height: 80px; padding: 10px;">
      <!-- 底部矩形内的文字或元素 -->
      <p>{{ footer_text }}</p>
    </td>
  </tr>
</table>

方案2：内容高度不固定时的自适应贴底

如果邮件内容高度不确定，需要底部矩形始终贴在邮件窗口底部，可给内容区表格设置height: 100%，配合MSO属性强制高度计算：

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
  <tr>
    <!-- 内容区占满剩余高度 -->
    <td valign="top" height="100%" style="mso-height-rule: exactly;">
      <!-- 邮件正文 -->
    </td>
  </tr>
  <tr>
    <!-- 底部矩形自动贴底 -->
    <td style="background-color: #ffffff;">
      <!-- 底部内容 -->
    </td>
  </tr>
</table>

三、补充：Outlook不支持属性的替代方案 #

• opacity半透明：不能用opacity属性，改用RGBA颜色配合MSO备用色：

  <td style="background-color: rgba(255,255,255,0.7); mso-background-alt: #ffffff;">
  

  mso-background-alt是Outlook专属属性，当RGBA不被识别时显示纯色 fallback。
• margin属性：用表格的cellpadding或行内padding替代，或者调整表格的width和嵌套结构实现间距。

核心原则 #

Outlook邮件开发必须完全依赖表格布局，抛弃现代CSS布局（flex、grid、position等），所有样式尽量写行内，避免外部样式表或