本文详解在兼容性严苛的HTML邮件环境中，通过重置表格cellspacing="0"彻底消除相邻单元格间白隙，实现两张图片（或色块）无缝叠放的可靠方案。
本文详解在兼容性严苛的html邮件环境中，通过重置表格cellspacing="0"彻底消除相邻单元格间白隙，实现两张图片（或色块）无缝叠放的可靠方案。
在HTML邮件开发中，视觉精度至关重要——哪怕1像素的意外间隙，都可能破坏设计一致性，尤其在按钮、横幅或双图组合等关键区域。你遇到的“两张图片叠放后出现白缝”问题，并非CSS padding 或 margin 所致，而是HTML表格固有的默认渲染行为：绝大多数邮件客户端（包括Outlook、Apple Mail、Gmail Web/Android）会对 <table> 默认应用 <code>cellspacing="2"（即单元格之间保留2像素间距），该值无法通过CSS border-spacing 可靠覆盖（因邮件客户端对CSS3支持极弱）。
✅ 正确解法是显式声明 cellspacing="0" 属性（注意：必须写在 <table> 标签内，作为HTML属性而非CSS样式）：<pre class="brush:php;toolbar:false;"><div style="width:750px;">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td style="width:40%; background-color: red; height:150px; padding: 0; margin: 0;"></td>
<td style="width:60%; background-color: yellow; height:150px; padding: 0; margin: 0;"></td>
</tr>
</table>
</div></pre><p>? 关键要点说明：</p>
<ul>
<li>
<code>cellspacing="0"：强制清除单元格之间的物理间距（最核心修复）；
cellpadding="0"：确保单元格内容与边框无内边距（辅助加固）；border="0"：避免部分旧版Outlook自动添加表格边框；padding: 0; margin: 0;：双重保险，屏蔽可能的客户端样式干扰。⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
切勿依赖 CSS
border-collapse: collapse：虽在现代浏览器有效，但在 Outlook for Windows（基于MS Word渲染引擎）中完全不生效； - 避免使用 Flexbox/Grid：90%以上邮件客户端不支持，会导致布局坍塌；
- 若需叠加图片（如水印效果），可将第二张图置于
position: relative的<td> 内，再用 <code>position: absolute; top: 0; left: 0;精确定位，但务必包裹在cellspacing="0"表格中以保障底层结构无隙。此方案经主流邮件客户端（Outlook 2016–365、Gmail、Apple Mail、Yahoo Mail）实测兼容，是邮件开发中消除表格白隙的黄金标准。
