用 插入不被合并的空格，它是不折行空格字符，浏览器既不合并也不换行丢弃；在HTML中优先使用 ，JS中用'\u00A0'，CSS伪元素中必须用\u00A0。
HTML里怎么插入一个空格，又不被浏览器合并？
浏览器默认会把连续的空白字符（空格、换行、制表符）压缩成一个空格。想“插一个空格”却显示不出来，本质不是没插上，而是被合并了。
- 用普通空格键打出来的
-
- 别用
- CSS 的
white-space: pre或pre-wrap能保留源码空格，但会影响整块文本的换行行为，杀伤力大，慎用
用 还是 \u00A0？
两者等价： 是 HTML 实体写法，\u00A0 是 Unicode 码点，在 JS 字符串或 CSS content 里常用。
- 在 HTML 标签内直接写空格位置，优先用
- 在 JS 动态拼接 HTML 时，用
'\u00A0'更稳妥，避免字符串里写实体被转义或解析异常 - 在 CSS 的
::before或::after中加空格，必须用\u00A0，因为 - 注意：不要混用
文本（后面跟普通空格），那个普通空格依然会被压缩
为什么 有时看起来“没起作用”？
常见错因不是 失效，而是它被其他样式覆盖或误判了视觉效果。
- 父容器设置了
font-size: 0（常用于清除 inline 元素间隙），会导致font-size - 用了
text-indent或padding-left误以为是空格效果，实际是缩进或内边距 - 在
<pre class="brush:php;toolbar:false;"></pre>或white-space: pre区域里， - 调试时右键“查看网页源代码”，看到
替代方案：什么时候该放弃空格，改用 CSS？
如果目标是控制间距、对齐或响应式留白，硬插 很快会失控。
- 两个词之间需要固定间隙，用
margin-right或padding-right更可控 - 文字末尾需要“撑开”容器宽度，用
min-width或伪元素::after { content: '\u00A0'; } - 表格单元格内文字右对齐但需右侧留空，用
padding-right，别靠一堆 - 真正需要“不可见但占位”的场景极少，多数时候是排版思路卡在了 HTML 层，其实该交给 CSS 盒模型处理
空格看着小，但它是 HTML 渲染层和 CSS 排版层交界处最容易滑脱的一环——插对了位置，不等于解决了问题；插错了上下文，反而掩盖了真正的布局缺陷。
立即学习“前端免费学习笔记（深入）”；
