html默认折叠空白字符，需用 、white-space或等显式手段控制空格显示。
为什么直接敲空格键没用
浏览器默认会把连续的普通空格、制表符、换行符全部压缩成一个空格，哪怕你在源码里写了十个空格或混着按了 Tab + Enter，最终渲染出来还是一个。这不是 bug，是 HTML 规范里明确规定的「空白折叠」行为。
常见错误现象：This word 在页面上只显示为 This word；用空格对齐两段文字失败；复制粘贴代码时缩进全乱。
- 根本原因在词法解析阶段：HTML 解析器先把所有空白字符统一转成 U+0020，再压缩连续序列
- 元素标签之间的空格（比如
<div></div> <p></p>中的空格）可能被渲染为间隙，但不可控 - 想靠空格做布局，等于在对抗默认行为——得用显式手段覆盖它
用 插入可控空格最直接
是 non-breaking space，宽度≈普通空格，但不会被折叠，也不会在该位置换行。它是处理「需要几个就几个」场景的首选。
使用场景：单词间加固定空隙、防止数字/单位断行（如 100 px）、中文段首缩进（ 模拟两个汉字宽）。
- 写多个就重复拼接：
Hello World→ 显示四个空格 - 注意分号不能省：
 无效，必须是 - 不适用于大段文本排版——维护成本高，语义弱，且无法响应式缩放
用 white-space CSS 属性批量控制空白
当你要保留一整块文本里的原始空格和换行（比如日志、代码片段、诗歌），white-space 比堆 更干净。
关键取值差异：
-
white-space: pre：完全保留空格和换行，行为像<pre class="brush:php;toolbar:false;"></pre>标签，但不带默认等宽字体 -
white-space: pre-wrap：保留空格和换行，同时允许自动换行（推荐用于用户输入内容） -
white-space: nowrap：合并空格，但禁止换行——适合单行标签、按钮文字防折行 - 别用
pre-line处理多空格：它会合并连续空格，只保留换行
示例：<div style="white-space: pre-wrap">foo bar\n baz</div> 会如实显示四空格和缩进。
什么时候该用 <pre class="brush:php;toolbar:false;"></pre> 标签
<pre class="brush:php;toolbar:false;"></pre> 不只是「显示代码」的标签。它本质是开启 white-space: pre + 默认 font-family: monospace 的快捷方式。
适用条件：
- 内容本身含大量空格/缩进/制表符，且格式必须严格还原（如 ASCII 图、配置文件片段）
- 不需要改字体或行高，能接受等宽默认样式
- 不用于内联文本——
<pre class="brush:php;toolbar:false;"></pre>是块级元素，强行内联会破坏流式布局
注意：<pre class="brush:php;toolbar:false;"></pre> 里的 仍生效，但通常没必要混用；若要取消等宽字体，得额外写 font-family: inherit。
容易被忽略的一点：空格的「宽度」在不同字体下并不一致。 和 （全角空格）在中文字体里才稳定占满一个汉字位，西文字体下可能偏窄——做中文排版时，别盲目依赖 的视觉宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
