邮件中堆叠两张图片出现无内边距空白间隙问题求助

邮件客户端的HTML渲染逻辑和普通浏览器差异极大，无设置的间隙通常来自三个核心原因，对应解决方案如下：

• 图片的行内元素属性：图片默认是inline元素，会和文本基线对齐，底部自动留出空白。直接给图片加style="display:block;"，强制转为块级元素即可消除。
• 代码中的换行/空格：两张图片的HTML代码间如果有换行、空格，部分客户端会解析成空白字符。把图片代码紧密连在一起，不要留任何空白，比如<img src="a.jpg"><img src="b.jpg">。
• 表格的默认间距：如果用表格嵌套图片，表格和单元格可能自带默认边距。给表格加style="border-collapse:collapse; border-spacing:0;"，单元格加style="padding:0; margin:0;"。

针对上下堆叠场景，给你两个可用的代码示例：

直接堆叠图片 #

<div style="width:750px;">
  <img src="顶部图片地址" style="display:block; width:100%;" alt="顶部图片">
  <img src="底部图片地址" style="display:block; width:100%;" alt="底部图片">
</div>

表格包裹实现堆叠 #

<div style="width:750px;">
  <table style="width:100%; border-collapse:collapse; border-spacing:0;">
    <tr>
      <td style="padding:0; margin:0;">
        <img src="顶部图片地址" style="display:block; width:100%;" alt="顶部图片">
      </td>
    </tr>
    <tr>
      <td style="padding:0; margin:0;">
        <img src="底部图片地址" style="display:block; width:100%;" alt="底部图片">
      </td>
    </tr>
  </table>
</div>

注意：邮件渲染一定要用主流客户端（Outlook、Gmail、苹果邮件等）实际测试，不同客户端的兼容性差异很大。

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