HTML邮件表格中图片下方出现多余空白的问题求助

这是邮件开发里的典型坑，根源是图片默认是inline-block元素，会和文本基线对齐，导致下方出现几像素空白——这和你设置的padding、border完全无关，之前的样式没命中核心问题。

直接给img标签加两个关键样式就能解决：

• display: block;：把图片改成块级元素，彻底消除基线对齐带来的空白
• vertical-align: bottom;（可选，若不想改成块级）：强制图片和容器底部对齐，替代默认的基线对齐

考虑邮件客户端兼容性，建议直接给img加上display:block，修改后的图片标签代码如下：

<a href="URL"><img width="287" class="imgStack" style="border: 0; display: block;" src="https://i.imgur.com/I1d9YPY.png"></a>

如果遇到个别顽固客户端（如部分Outlook版本），可以给包裹图片的td额外加上line-height: 0; font-size: 0;，彻底清除行高带来的潜在空白：

<td style="padding: 0; line-height: 0; font-size: 0;">
  <a href="URL"><img width="287" class="imgStack" style="border: 0; display: block;" src="https://i.imgur.com/I1d9YPY.png"></a>
</td>

原理补充：inline/inline-block元素的默认基线对齐规则，会给元素下方预留对应行高的空白空间——哪怕周围没有文本，浏览器也会保留这个区域。改成块级元素或调整垂直对齐方式，就能彻底规避这个问题。

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