Outlook客户端不识别Margin的HTML邮件布局问题如何解决

• 优先使用原生表格实现布局与间距
  Outlook采用Word内核渲染HTML，对CSS盒模型的margin、padding、透明border支持极差，所有间距需求直接用表格原生属性实现：外层容器用<table>标签，通过cellpadding、cellspacing属性设置全局间距；如果需要单独控制两张图片的间距，可在两个图片所在的<td>之间插入宽度固定的空白<td>，内容留空即可。
• 自适应与换行实现
  外层表格设置max-width适配大屏，给每个存放图片的<td>设置固定最小宽度，搭配媒体查询实现小屏自动换行：移动端媒体查询中将<td>的display属性设为block，宽度设为100%即可触发自动换行。
  另外添加Outlook专属条件注释，给Outlook单独设置固定宽度的横向布局，避免它忽略max-width属性挤压图片：

<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<!-- 这里放全局兼容的外层表格内容 -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

• 图片标签优化
  所有<img>标签统一添加display:block、border="0"属性，避免Outlook默认给图片添加的下方间隙与默认边框，同时设置width:100%;height:auto;实现自适应缩放。
• 完整示例代码参考

<!DOCTYPE html>
<html>
<head>
<style>
  @media only screen and (max-width: 480px) {
    .img-col {
      display: block !important;
      width: 100% !important;
    }
  }
</style>
</head>
<body>
<!-- Outlook专属固定宽度外层 -->
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
<tr><td align="center" valign="top" width="600">
<![endif]-->

<table role="presentation" border="0" cellspacing="10" cellpadding="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td class="img-col" width="20%" align="center">
      <img src="你的图片地址" width="100%" style="display:block;height:auto;" border="0" alt="图片">
    </td>
    <td class="img-col" width="20%" align="center">
      <img src="你的图片地址" width="100%" style="display:block;height:auto;" border="0" alt="图片">
    </td>
    <td class="img-col" width="20%" align="center">
      <img src="你的图片地址" width="100%" style="display:block;height:auto;" border="0" alt="图片">
    </td>
    <td class="img-col" width="20%" align="center">
      <img src="你的图片地址" width="100%" style="display:block;height:auto;" border="0" alt="图片">
    </td>
    <td class="img-col" width="20%" align="center">
      <img src="你的图片地址" width="100%" style="display:block;height:auto;" border="0" alt="图片">
    </td>
  </tr>
</table>

<!--[if mso]>
</td></tr></table>
<![endif]-->
</body>
</html>

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