在HTML邮件开发中，使用table布局叠放图片时，单元格默认间距（cellspacing）会导致不可见的白边；通过显式设置cellspacing="0"并禁用边框，可彻底消除间隙，确保视觉无缝对齐。
在html邮件开发中，使用table布局叠放图片时，单元格默认间距（cellspacing）会导致不可见的白边；通过显式设置`cellspacing="0"`并禁用边框，可彻底消除间隙，确保视觉无缝对齐。
在电子邮件客户端（如Outlook、Gmail、Apple Mail）中，CSS支持极其有限，必须依赖语义化且兼容性极强的table布局来实现精确排版。你遇到的“两张图片叠放后出现细微白隙”问题，并非由padding或margin引起，而是源于HTML <table> 元素的默认渲染行为：浏览器和邮件客户端会为表格单元格之间预留2px左右的<code>cellspacing（单元格间距），即使所有内联样式中未显式声明。
✅ 正确解法是在table标签上强制重置表格间距与边框：
<div style="width: 750px;">
<table style="width: 100%; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"><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>
? 关键修复点说明：
-
cellspacing="0"：移除单元格之间的横向/纵向间距（最核心必加属性）； -
cellpadding="0"：清除单元格内容与边框间的内边距； -
border="0"：禁用表格默认边框（部分旧版Outlook会渲染出隐形边框线）； -
style="border-collapse: collapse;"：确保边框合并，进一步防止间隙生成； - 所有
<td>内显式添加<code>padding: 0; margin: 0;——虽在多数邮件客户端中无效，但作为防御性写法推荐保留。⚠️ 注意事项：
- 不要依赖CSS Flexbox或Grid：90%以上邮件客户端（尤其是Outlook桌面版）完全不支持；
- 避免使用
<img>直接堆叠：若需叠加图片（如水印、角标），应将图片作为<td background="...">或使用VML（Outlook专属）+ PNG透明层组合；<li>测试务必覆盖主流客户端：可用<a href="https://www.php.cn/link/ce28c97dcd8381b7d5a093ffd1deae38" rel="nofollow" target="_blank">Email on Acid</a>或<a href="https://www.php.cn/link/fb8fb2ff998229aca1a25c0b94b94cc0" rel="nofollow" target="_blank">Litmus</a>验证渲染一致性；</li> <li>若需响应式适配，应在table外层包裹媒体查询（仅Gmail App/Apple Mail等有限支持），更稳妥方案是采用「fluid hybrid」布局（百分比宽度 + max-width + fallback fixed width）。</li> <p>? 进阶提示：当需要真正“Z轴叠放”（如图片A在上、图片B在下），而非并排拼接时，请改用嵌套table + <code>position: absolute（仅iOS Mail支持）或更兼容的VML +<rect></rect>（Outlook专用）。但绝大多数场景中，“无缝并排”即等效于视觉叠放效果——关键在于消灭那1–2px的不可见间隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
