浏览器默认压缩连续空白符为一个空格是html规范行为；需用 插入不可断行空格，或用white-space:pre-wrap等css属性控制空白显示。
浏览器默认会把连续空格、换行、制表符全压缩成一个空格，这不是 bug，是 HTML 规范行为。想让多个空格“真显示”，得绕过这个默认逻辑。
用 插入不可断行空格
这是最直接、兼容性最好的方式， 表示一个不换行空格，不会被压缩，也不会在单词中间断开。
- 写四个空格：写成
- 注意：它和普通空格一样有宽度，但不能被换行打断，适合用于“姓名： 张三”这类对齐场景
- 别滥用：用几十个
- 替代方案：
用 white-space 控制整块文本的空白处理
当你要保留一段文本里所有的空格和换行（比如代码片段、诗歌、日志输出），white-space 比堆 更干净。
-
white-space: pre：完全保留空格+换行，但不自动折行（超长会溢出） -
white-space: pre-wrap：推荐首选，保留空格和换行，同时允许自动换行 -
white-space: pre-line：合并连续空格，只保留手动换行——适合清洗后仍需换行的纯文本 - 注意：设在父容器上即可，子元素继承；不要给按钮文字设
nowrap还指望中间空格生效，它会把空格也“吞掉”
用 <pre class="brush:php;toolbar:false;"></pre> 标签快速包裹预格式化内容
<pre class="brush:php;toolbar:false;"></pre> 本质就是 white-space: pre 的语义化封装，适合小段固定格式文本。
- 直接写：
<pre class="brush:php;toolbar:false;"> 这里缩进四格</pre>，浏览器原样渲染 - 缺点：
<pre class="brush:php;toolbar:false;"></pre>默认是块级、有上下边距、等宽字体，若只需保留空格不要样式，优先用 CSS 的white-space - 可嵌套：
<p></p> <pre class="brush:php;toolbar:false;">带空格的地址</pre>，但语义上不如直接给p加样式清晰
避免用空格做布局，该用 CSS 就用 CSS
很多人试图靠一堆 或源码换行来“挤”出间距，结果一改字体、一换设备就错位。
- 元素间距离：用
margin或gap（flex/grid） - 文字内缩进：用
text-indent（首行）、padding-left（整体） - 文字字间距/词间距：用
letter-spacing/word-spacing - inline-block 元素间莫名多出 4px 空隙？那是源码换行被解析为空格，不是“bug”，解决方法是：设父容器
font-size: 0再单独设子元素字号，或改用 flex
真正容易被忽略的是：空格问题从来不是孤立的。它常暴露语义缺失（比如该用 dl 做字段对齐却硬塞空格）、CSS 控制力不足（不敢动 white-space）、或编辑器配置混乱（VSCode 自动删行尾空格导致预设 被误删）。先厘清你要的是“视觉空格”还是“结构间距”，再选技术路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
