浏览器默认压缩连续空格是HTML规范行为，需用 、white-space CSS或<pre>标签显式保留；但布局应优先使用text-indent、margin等CSS属性而非空格。
浏览器默认会把连续空格压缩成一个，这不是 bug，是 HTML 规范行为；要显示多个空格，必须显式干预。
为什么直接敲多个空格没用
HTML 解析器在预处理阶段就会执行「空白折叠」（whitespace collapsing）：所有连续的空白字符（ 、\t、\n）被合并为单个空格，且开头结尾的空白会被忽略。哪怕你在编辑器里写了十个空格，<p>hello world</p> 渲染出来仍是 hello world。
这种设计是为了让 HTML 源码可读性不受排版影响，但代价是无法靠缩进或空格控制视觉间距。
用 插入不可断行空格
是最常用、兼容性最好的方案，它代表一个「不换行空格」，不会被折叠，也不会在该位置断行。
立即学习“前端免费学习笔记（深入）”；
- 单个
<p>姓名: 张三</p>显示为「姓名: 张三」 - 支持混合使用其他空格实体：
- 注意不要滥用：大量堆砌
用 white-space CSS 属性批量控制
当需要保留整段文本的原始空格和换行（比如代码块、诗歌、日志输出），white-space 比手动插 更合理。
-
white-space: pre：完全保留空格和换行，但不自动换行——适合固定宽度容器内的紧凑文本 -
white-space: pre-wrap：保留空格和换行，同时允许长行自动折行——日常推荐，兼顾语义与可用性 -
white-space: pre-line：合并连续空格，但保留换行符——适合清理杂乱源码后仍需换行的场景 - 别设在
<body>或全局p上，容易破坏默认流式布局
用 <pre> 标签包裹纯格式化内容
<pre> 是语义最明确的方案，浏览器会原样渲染所有空白和换行，包括制表符。
- 适合展示代码、ASCII 图、带缩进的说明文本等「格式即内容」的场景
- 默认用等宽字体，可通过
font-family覆盖，但要注意中文字体等宽支持度 - 不能嵌套块级元素（如
<div>）在<pre>内，否则解析可能出错；需要用<code>或<span>做内联标记 - 响应式设计中需配合
overflow-x: auto防止横向溢出
真正难的不是选哪种方法，而是判断该不该用空格来实现布局——比如首行缩进、元素间距、对齐需求，都应该交给 text-indent、margin、flex 或 grid，而不是靠塞一堆 或 <pre>。空格实体和 white-space 是为「内容格式」服务的，不是为「页面结构」兜底的。
