HTML规范强制合并空白符，应优先用 ；微调用  &thinsp；真需控距用CSS；框架中需转义；国际化时避免硬编码。

为什么直接敲空格键没用

浏览器会把连续的空格、制表符、换行符全部合并成一个空格，首尾空白也直接丢弃——这不是 bug，是 HTML 规范强制要求的行为。你敲 10 次空格键，代码里看着有 10 个，渲染出来还是 1 个。

该用   还是   还是  

优先选  ：它语义清晰（不换行空格），兼容性最好，所有浏览器和读屏器都认。其他几个属于“微调专用”：

•   ≈ 半个中文宽度，适合数字对齐或单位前留隙（如 123 kg）
•   ≈ 一个中文宽度，偶尔用于模拟缩进，但别用它替代 text-indent
•   和   极细，数学公式或标点前后才用，日常基本不用

别堆      ——5 个以上就该怀疑是不是 CSS 更合适了。

什么时候不该用  ，而该用 CSS

硬塞   是权宜之计，真要控制间距，CSS 更可控、可维护：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 段首缩进两个字 → 用 text-indent: 2em，不是两个  
• 两段文字之间加空隙 → 改 margin-bottom，不是在结尾塞一堆  
• 单词间统一加宽 → 用 letter-spacing，不是每个空格都替换成  
• 整块文本要保留原始空格和换行 → 用 <pre> 或 white-space: pre-wrap，不是手动补  

特别注意：<pre> 默认等宽字体+上下边距，直接套用可能破坏原有样式；white-space: pre-wrap 允许折行，更适合正文内嵌。

Vue/React 里写   容易翻车

框架模板不自动解析 HTML 实体，直接写   会被当纯文本输出：

• Vue 中：在模板里写   ✅；但在 v-text 或 {{ }} 里必须写成   或用 v-html
• React 中：JSX 不解析实体，得写成 {"\u00A0"} 或 {String.fromCharCode(160)}
• 服务端渲染时，如果模板引擎自动转义，  可能变成文字   显示在页面上

最常被忽略的是国际化场景：硬编码   的文案，翻译成阿拉伯语或日语后，空格位置和数量往往不再合理，且无法通过 locale 配置动态调整。