必须用 cellspacing="0"、cellpadding="0" 和内联 style="margin:0;padding:0;border:none;" 三者组合清除 outlook 与 ios mail 中 table 默认边距;禁用 border-collapse 和全局重置,优先使用 html 属性与精准内联样式。

Outlook 和 iOS Mail 中 table 默认边距怎么清?
邮件客户端(尤其是 Outlook Desktop、Outlook for Mac、iOS Mail)对 table 的渲染高度依赖 HTML 属性,CSS 重置常常被忽略或部分失效。单纯写 margin: 0 或 * { margin: 0; padding: 0; } 在多数邮件客户端里不起作用,甚至可能触发 Outlook 的“安全模式”样式回退。
必须用双重保障:HTML 属性 + 内联 style + 容器级兜底。
<table cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; border: none;"> —— 这三者缺一不可;<code>cellspacing和cellpadding是 Outlook 能识别的硬编码属性,不能只靠 CSS- 外层
也要加style="margin: 0; padding: 0;",否则 Outlook 会额外加 8px 上下边距 - iOS Mail 对
border-collapse: collapse支持极差,别指望它生效;优先用cellspacing="0"控制单元格间隙 - 避免在
<td> 里嵌套 <code><p></p>或<div> —— 它们自带 margin,而 iOS Mail 不支持 <code>td > * { margin: 0; }为什么 border-collapse: collapse 在邮件里基本没用?
因为 Outlook(尤其是 Windows 版)根本无视
border-collapse,它只认cellspacing;而 Gmail App、Apple Mail 对该属性的支持也不稳定,有时合并边框反而导致线条变粗或错位。真实表现是:
border-collapse: collapse在桌面端 Gmail Web 可能生效,但在 Outlook Desktop、Outlook.com、iOS Mail 中会被直接丢弃 —— 浏览器开发者工具看不到效果,是因为邮件客户端根本不解析这条声明。- 替代方案:坚持用
cellspacing="0",并给<table> 加 <code>border="0"(这是老式但最兼容的写法) - 如果必须用边框,统一用
style="border: 1px solid #000;"写在<td> 上,而不是依赖 <code>table的 border-collapse 合并逻辑 - 别设
border-spacing: 0—— Outlook 完全不支持这个 CSS 属性 - 最稳妥:所有内容用
<div> 或 <code><span></span>包裹,并显式设style="margin: 0; line-height: 1.2;" - 禁止用
<p></p>—— 即使写了style="margin: 0",Outlook 仍可能插入 1em 默认 margin - 字体大小变化时,
line-height必须同步设为具体数值(如16px字体配line-height: 1.2),否则行高会浮动 - 避免
vertical-align: middle配合块级元素 —— 在 Outlook 中容易导致垂直偏移不可控 - 只写必要重置:
<table cellpadding="0" cellspacing="0" style="margin: 0; padding: 0;"> <li>不要用类名(如 <code>class="no-margin")—— 多数邮件客户端会删掉整个<style></style>块 - 如果用了 CSS inliner 工具(如 Juice),确认它没把
td p这类选择器转成无效内联样式 - 测试重点不是 Chrome,而是 Outlook 2016/2019、iOS Mail、Gmail App —— 它们对 CSS 的容忍度差异极大
td 内部文字上下留白怎么去掉?
不是表格本身有边距,而是你往
<td> 里塞了 <code><p></p>、<h2></h2>或<span></span>之后,它们的默认 margin 或 line-height 撑开了单元格高度。邮件客户端不会帮你做 margin collapse,只会原样渲染。全局重置 * { margin: 0; padding: 0 } 为什么在邮件里更危险?
它在网页里是捷径,在邮件里是雷区。Gmail Web 会吃掉整段
<style></style>标签;Outlook 会直接忽略;而 Apple Mail 可能把它应用到<input>或按钮上,导致交互控件变形或不可点。邮件 HTML 必须“最小化信任”,每条样式都要精准命中目标元素,且优先用内联 style。
真正麻烦的从来不是“怎么写”,而是“哪些客户端会无视你写的”。表格边距问题本质是兼容性博弈,不是样式调试 —— 所有方案都得倒着验证:先查客户端支持表,再决定是否启用某条 CSS,而不是照着现代浏览器写完再适配。
- 替代方案:坚持用











