HTML5空格在邮件模板中不可靠,因各客户端会合并空格或忽略 ;最稳妥方案是用带固定像素width的<td>占位,并设cellspacing="0" cellpadding="0"。

HTML5 中的空格在邮件模板里基本不可靠,直接写多个空格会被客户端合并成一个,这是绝大多数邮件客户端(Outlook、Apple Mail、Gmail Web/App)的默认行为,和浏览器渲染逻辑不同。
为什么 在部分邮件客户端会失效
很多邮件客户端(尤其是 Outlook Desktop 使用 Word 渲染引擎)对 的支持不一致:有的会忽略、有的转成普通空格、有的甚至破坏换行。更麻烦的是,某些客户端(如 iOS Mail)在「回复」或「转发」时会自动清理冗余 ,导致排版坍塌。
- Outlook 2016/2019/365(Windows):
常被当普通空格处理,无法撑开间距 - Gmail(Web):支持
,但嵌套在<td>或<div>中可能被截断 - Android Gmail App:对连续
有数量限制,超 3~4 个就只渲染 1 个
用 <span> + font-size / letter-spacing 强控空隙
比依赖空格更稳的方式,是用内联样式控制字符间距或隐藏占位元素。注意:必须用内联样式,且避免用 margin 或 padding(Outlook 对它们支持极差)。
<span style="font-size: 0; line-height: 0;"> </span> <span style="letter-spacing: 8px;">Text</span>
-
font-size: 0配合可创建“透明占位”,再用letter-spacing拉开文字间距 - 避免用
width或min-width控制空隙——Outlook 不识别多数块级宽度属性 - 所有样式必须写在
style属性里,不能依赖外部 CSS 或<style>标签
表格单元格(<td>)才是最稳的“空格容器”
邮件模板中真正可靠的空白控制方式,是用带固定宽度的 <td> 占位。这是所有主流客户端都支持的方案。
立即学习“前端免费学习笔记(深入)”;
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10"></td>
<td>Hello</td>
<td width="20"></td>
<td>World</td>
</tr>
</table>
-
width必须设为具体像素值(如"10"),百分比在 Outlook 中常被忽略 - 务必设置
cellspacing="0" cellpadding="0",否则默认边距会干扰对齐 - 不要试图用
<col>或<colgroup>——Outlook 完全不支持
真正难的不是加空格,而是让“空格在所有客户端看起来一样”。哪怕只是两个词之间加 4px 间隙,也得放弃语义化写法,回到表格占位的老路。别信预览工具,一定要真机测 Outlook、iOS Mail 和 Gmail App。











