Outlook 2016邮件HTML中图片在表格单元格留1px空白问题求助

兄弟我太懂你这种被Outlook支配的痛苦了！用表格写邮件已经够复古了，还来个1px空白搞心态，这事儿我之前踩过N次坑，给你说说根儿上的原因和靠谱的解决办法：

为啥会出现这1px空白？ #

核心原因是Outlook 2016把图片默认当成行内元素，而行内元素会预留出字体基线下方的微小空间（就像你写文字时，字母g下面的那点空隙），哪怕你的单元格里只有图片，这个空隙也会顽固地出现。另外表格单元格默认的内边距、图片的对齐方式也可能雪上加霜。

亲测有效的解决办法，按优先级来： #

• 给图片加display:block;内联样式：直接把图片改成块级元素，彻底干掉行内元素带来的基线空隙。代码示例：

  <img src="your-flowchart-image.png" style="display:block;">
  

• 强制图片垂直对齐：给图片加vertical-align:top;或者vertical-align:middle;，避免默认的基线对齐产生空隙。比如：

  <img src="your-flowchart-image.png" style="vertical-align:top;">
  

• 清空表格和单元格的默认边距：Outlook对HTML属性的优先级远高于CSS，所以一定要给表格加上cellpadding="0" cellspacing="0" border="0"，同时给<td>加内联样式padding:0; margin:0;。完整示例：

  <table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
    <tr>
      <td style="padding:0; margin:0;">
        <img src="your-flowchart-image.png" style="display:block;">
      </td>
    </tr>
  </table>
  

  （额外加border-collapse:collapse;是防止表格边框可能带来的缝隙）
• 极端情况补刀：设置line-height:0;：如果上面的方法还没搞定，给包含图片的<td>加line-height:0;内联样式，彻底消除行高带来的微小空隙。

额外提醒 #

Outlook 2016对CSS的支持极其拉胯，所有样式尽量用内联样式，别写在<style>标签里，更别用外部样式表。能靠HTML属性解决的（比如cellpadding）就优先用属性，别指望CSS能百分百生效。

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