HTML默认折叠连续空格是规范行为；用 可精确控制空格数量；white-space属性适合批量保留空格与换行；仅适用于需预格式化的语义场景。

为什么直接敲空格键没用

HTML 默认会把连续的普通空格、制表符、换行符全部“折叠”成一个空格，这是规范行为，不是 bug。比如你在

里写 hello   world（中间三个空格），浏览器照样只显示一个空格间距。

用   实现可控空格数量

这是最常用也最稳妥的方式：  是不换行空格实体，每个都独立存在、不会被合并，也不会在词尾断开。

• 要插 2 个空格，就写   
• 要插 4 个空格对齐某处，就写     
•   不能写在属性值里当分隔符，比如
  会出错
• 它宽度固定，约等于一个 ASCII 字符宽度，中文排版时可能略窄

用 white-space CSS 属性批量保留原始空格

适合整段文本需要保持源码空格格式的场景，比如日志、诗歌、代码片段。

• 给容器加 style="white-space: pre;"：保留所有空格和换行，且不自动换行
• 用 white-space: pre-wrap;：保留空格和换行，但允许长行自动折行
• 注意：该样式会影响整个元素内所有文本，包括换行符，不是只针对空格
• 字体默认变成等宽（如 monospace），需额外用 font-family 覆盖

别乱用

标签除非真需要预格式化

确实能原样保留空格和换行，但它自带语义和样式副作用：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 默认用等宽字体，且 margin 和 white-space 都已设好
• 如果只是想在普通段落里多塞两个空格，套个
  反而破坏语义和样式一致性
• 嵌套使用（比如

  <p>...</p>

  ）会导致布局异常，
  不该包裹块级元素
• 真正适合它的场景是：终端输出、JSON 示例、缩进明显的伪代码

最容易被忽略的一点是：空格效果从来不是孤立存在的——  解决的是字符级占位，white-space 控制的是文本渲染规则，而

是语义+样式双重绑定。选哪个，取决于你到底想“控制空格”，还是“保留格式”。