HTML规范规定连续空白字符被压缩为单个空格，需用 实现不可压缩空格；大段格式化文本应使用white-space:pre-wrap等CSS属性控制，避免滥用 做布局。
为什么直接敲空格键没用
浏览器默认会把连续的普通空格、制表符、换行符全部压缩成一个空格。这不是 bug，是 HTML 规范定义的行为——解析器在词法阶段就把所有空白字符统一转成 U+0020，再做压缩。所以写 姓名: 张三，最终渲染出来还是 姓名: 张三（只一个空格）。
用 插入可控空格最直接
是不换行空格（non-breaking space），宽度和普通空格一致，但不会被压缩，也不会在该位置断行。适合小范围补空、对齐、防断词。
- 要显示 3 个空格：写
- 中文排版首行缩进 2 字符：用
- 避免“100 kg”在行末被拆成“100
kg” - 注意：
" "在 JS 字符串里不会自动解析，得用String.fromCharCode(160)或 innerHTML 赋值
大段格式化文本优先用 white-space: pre-wrap
如果内容本身含多空格、缩进、换行（比如日志、代码片段、诗歌），硬塞一堆 既难读又难维护。这时候该用 CSS 控制整体行为：
-
white-space: pre-wrap：保留所有空格和换行，同时允许自动折行——最平衡的选择 -
white-space: pre：完全保留格式，但不折行，长文本容易撑破容器，需配合overflow-wrap: break-word -
white-space: pre-line：合并连续空格，但保留手动换行，适合清理粘连空格又想留换行的场景 - 别用
white-space: normal配合大量
别用空格实体做布局，这是反模式
或 、 本质是字符，不是样式。用它们实现缩进、对齐、列间距，会导致：
立即学习“前端免费学习笔记（深入）”；
- 无法响应式：固定字符数在不同字体/字号下宽度不一致
- 可访问性差：屏幕阅读器会逐个念出“空格、空格、空格”
- 维护成本高：改一个缩进得数
- 真正该用
text-indent做首行缩进，padding-left做整体缩进，margin控制块级元素间距
空格实体只解决“这里必须是一个不可压缩、不可断行的空白字符”这个具体问题，不是万能胶布。复杂排版逻辑一旦开始靠堆 维持，就该停下来重看 CSS 结构了。
