Outlook客户端不识别邮件图片Margin-left样式问题

Outlook 桌面端自2007版本起采用Word作为HTML渲染内核，对标准CSS支持度极低：

• margin 属性作用在<img>、<a>这类行内元素上时完全无法稳定渲染，不管属性名写为小写margin-left还是首字母大写Margin-left都无效，属性名首字母大写的兼容技巧仅适用于极少数特定属性，对边距类属性没有作用。
• Word渲染引擎会直接忽略行内元素上的外边距设置，这是样式不生效的核心原因。

邮件模板优先使用表格布局+padding实现间距，这是覆盖所有邮件客户端（包括全版本Outlook）的最稳妥方案，不要用margin控制图片、链接的位置。

方案1：外层套单元格用padding实现左偏移（推荐） #

将原有直接放置在父td中的图片链接，替换为一层嵌套表格，给图片所在单元格设置左内边距，删除img标签上原有的margin样式：

<!-- 替换原有<a><img /></a>代码段 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td style="padding-left: 45px;">
      <a href="*" target="_blank">
        <img src="https://i.ibb.co/F7SbL1F/Aura-Logo-Footer.png" alt="logo" width="100" border="0" style="display: block;">
      </a>
    </td>
  </tr>
</table>

img标签记得加display:block，避免部分客户端下图片底部出现默认3px空白间隙。

方案2：固定宽度空单元格做占位 #

如果需要更精准的偏移控制，可在图片左侧增加固定宽度的空td作为占位，无需额外写边距样式：

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td width="45" style="width: 45px;"></td>
    <td>
      <a href="*" target="_blank">
        <img src="https://i.ibb.co/F7SbL1F/Aura-Logo-Footer.png" alt="logo" width="100" border="0" style="display: block;">
      </a>
    </td>
    <td></td>
  </tr>
</table>

该方案在所有Outlook版本下都不会出现偏移误差。

• 邮件模板统一用表格做布局，所有间距优先通过单元格的padding实现，尽量避免使用margin，尤其不要在行内元素上添加margin属性。
• 所有图片必须设置明确的width、height属性，同时加上display:block，防止Outlook自动拉伸图片或生成多余空白。
• 不要依赖CSS属性名大小写这类非标准技巧做兼容，这类方法覆盖的客户端范围极小，稳定性极差。

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