HTML邮件签名所用表格的每个td元素底部出现2px异常间隙如何解决

问题根源 #

2px间隙是HTML邮件场景下的常见问题，根源是img默认属于行内替换元素，邮件客户端会为文字基线预留下行空间，同时td的默认字体大小、行高属性也会额外撑出间隙，调整border、padding、border-collapse未触达核心触发点，因此无法解决问题。

修复方案 #

• 所有<img>标签统一添加style="display:block;border:0;margin:0;padding:0"属性，彻底取消行内元素的基线预留空间，同时兼容老版本邮箱默认给图片加边框的问题
• 所有包含图片的<td>标签统一添加style="font-size:0;line-height:0;margin:0;padding:0"属性，消除字体、行高带来的额外高度占用
• 代码编写时避免<td>和<img>标签之间存在换行、空格，部分邮件客户端会将空白节点渲染为微小间隙，尽量写成<td><img src="xxx"></td>的紧凑格式
• 所有<table>标签添加style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"属性，专门兼容Outlook平台的表格默认间距

代码修改示例 #

原代码片段：

<td style="padding: 0;"><img src="https://i.imgur.com/EEtSUAZ.png" alt=""></td>

修改后代码：

<td style="padding:0;margin:0;font-size:0;line-height:0;"><img style="display:block;border:0;margin:0;padding:0;" src="https://i.imgur.com/EEtSUAZ.png" alt=""></td>

按照上述规则修改所有td、img、table标签后，Gmail和Outlook平台的间隙问题即可解决。

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