html默认压缩空白字符是规范行为；用标签可原样保留空格和换行，适合代码、诗歌等场景，但会将html标签作为文本显示。
HTML 默认会把连续空格、换行、制表符全部压缩成一个空格，这不是 bug，是规范行为。想保留空格格式，得明确告诉浏览器“别压缩”，方法不止一种，选错就白折腾。
用 <pre class="brush:php;toolbar:false;"></pre> 保留原始空格和换行
这是最直接的方式，<pre class="brush:php;toolbar:false;"></pre> 标签会让浏览器原样渲染所有空白字符，包括缩进、多空格、换行。
- 适合代码块、诗歌、ASCII 图、日志输出等需要精确格式的场景
- 默认用等宽字体，可通过
font-family覆盖，例如font-family: system-ui, sans-serif; - 注意：它会把 HTML 标签也当普通文本显示，所以里面要写
<而不是，否则会被解析 - 如果只是想保留空格但不用等宽字体，不推荐无脑套
<pre class="brush:php;toolbar:false;"></pre>
用 white-space CSS 属性精细控制
white-space 是比 <pre class="brush:php;toolbar:false;"></pre> 更灵活的选择，它不改变语义，只改渲染行为。
-
white-space: pre;—— 等价于<pre class="brush:php;toolbar:false;"></pre>，保留空格和换行，不自动折行 -
white-space: pre-wrap;—— 推荐常用项：保留空格和换行，但允许长单词或超宽内容折行 -
white-space: pre-line;—— 合并连续空格，但保留换行（\n变<br>效果） - 必须作用在块级元素上，比如
p、div；对span无效，除非设display: inline-block
用 插入不可折叠空格
是 HTML 实体，代表 non-breaking space，浏览器不会把它和其他空格合并，也不会在它位置换行。
- 适合防止单词断开，比如 “100 km”、“Mr. Smith”
- 不适合大段缩进或排版——写十个
- 不能替代
text-indent做首行缩进，因为它是内容级空格，不是样式控制 - 全角空格（中文输入法下 Shift+Space）效果类似，但不可靠，不同字体宽度不一致，且无法被 CSS 统一调整
text-indent 不是用来“加空格”的
很多人误以为 text-indent 是插入空格的手段，其实它是纯样式属性，只影响块级元素第一行的起始位置。
- 值为
2em表示缩进两个当前字体大小的宽度，对中文就是约两字宽，语义清晰 - 它不产生实际空格字符，所以复制文本时不会带多余空格
- 负值支持悬挂缩进（如参考文献），但慎用，可能影响屏幕阅读器理解
- 和
padding-left容易混淆：后者让整段左移，text-indent只动第一行
真正麻烦的不是选哪种方法，而是混用——比如在 <pre class="brush:php;toolbar:false;"></pre> 里再写 ，或给 text-indent 的段落又加 white-space: pre-wrap。这些组合往往导致意料外的空白叠加、复制粘贴错乱、响应式失效。先想清楚你要的是“保留源码格式”还是“控制视觉缩进”，再选对应方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
