根本原因是浏览器及邮件客户端默认合并连续空白字符，Outlook等还过滤 并存在编码兼容问题；可靠方案是表格+透明GIF占位。
HTML 中的空格显示异常，根本原因不是“打不出空格”，而是浏览器默认会合并连续空白字符（包括空格、制表符、换行）。邮件客户端尤其激进——很多（如 Outlook、Apple Mail）甚至会忽略 之外的所有空白处理逻辑。
为什么 在邮件里也失效？
部分老旧邮件客户端（尤其是 Outlook for Windows 使用 Word 渲染引擎）会把 当作普通空格过滤掉，或在特定上下文中（如 <td> 内、内联样式后）意外折叠。更麻烦的是：某些客户端对 的编码（UTF-8 vs. Windows-1252）不一致，导致显示成方块或乱码。
实操建议：
- 避免只靠单个
- 在 Outlook 兼容邮件中，优先用
- 不要在
<span style="white-space:pre">里塞空格——多数邮件客户端完全忽略white-space样式
<pre> 和 <code> 标签不能解决邮件空格问题
这两个标签依赖 CSS 的 white-space: pre 行为，而几乎所有主流邮件客户端（Outlook、Gmail Web/App、Yahoo）都禁用或阉割了 white-space 支持。即使你写了 <pre>hello world</pre>，空格依然会被压成一个。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 彻底放弃
<pre>、<code>、<textarea>等依赖 whitespace 的标签用于排版 - 需要保留多空格文本时（如代码片段），改用等宽字体 + 零宽空格占位，例如：
hello world（是零宽空格，干扰小但能阻止合并）
真正可靠的邮件空格方案：表格单元格 + 透明像素 GIF
这是经过 Litmus / Email on Acid 实测兼容性最高的方案。原理是：用不可见的 <img> 占据宽度，绕过文本空白合并逻辑。
示例（安全兼容 Outlook/Gmail/Yahoo/iOS Mail）：
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>Hello</td>
<td width="10"><img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" width="10" height="1" alt=""></td>
<td>World</td>
</tr>
</table>
说明：
-
width="10"控制空隙大小，可调为5、15等整数 - 使用 base64 内联 GIF，避免外部资源加载失败；所有主流邮件客户端均支持 data URI
- 必须设
height="1"并配alt=""，否则 Outlook 可能渲染出空白行或边框 - 不要用
<div>或<span>+margin—— Gmail 会 strip 大部分 margin 声明
复杂点在于：没有银弹。纯文本空格控制在邮件里注定要妥协。最易被忽略的是——连 的数量都要按客户端测试，比如 Apple Mail 对 3 个 渲染正常，Outlook 可能只认 4 个。上线前务必用 Email Client Matrix 工具真机截图验证。
