浏览器默认合并连续空白符是HTML规范行为，需用 、white-space属性或pre标签等正确方法控制空格显示，避免滥用 影响可维护性。
浏览器默认会把连续空格、制表符、换行符全合并成一个空格，这不是 bug，是 HTML 规范行为。想让多个空格显示出来，不能靠狂敲空格键，得用对方法。
为什么直接敲空格没用
HTML 解析器在构建 DOM 时，会对文本节点里的空白字符做“折叠”：连续的 、\t、\n 全部压缩为单个空格；首尾空白则直接丢弃。所以 <p>hello world</p> 和 <p>hello world</p> 渲染效果一样——除非你用了 或其他实体。
- 常见错误现象：写了一串七八个空格，预览后还是一个；复制别人代码里的空格，粘贴后失效（实际混入了零宽字符）
- 真实场景中，这种折叠只发生在“文本内容内”，不影响元素间的空白（比如两个
<span></span>之间的空格仍会渲染为一个间隙） - 性能上毫无影响，但滥用
什么时候该用 ，什么时候不该用
是不换行空格，语义是“这里必须有一个空格，且前后词不能断行”。它不是“多加几个空格”的快捷键。
立即学习“前端免费学习笔记（深入）”；
- 适合场景：防止“¥100”被拆成两行、“Mr. Smith”中间断开、表格中空单元格占位（
<td> </td>） - 不适合场景：给标题文字加间距（该用
letter-spacing）、对齐按钮文字（该用padding）、模拟缩进（该用text-indent或 CSS 网格） - 容易踩的坑：
&nbps;（拼错）、 （缺分号）、复制时带隐藏 Unicode 字符（如），都会原样输出字符串
保留多空格+换行的可靠方案
需要完整保留源码格式（比如代码块、日志、诗歌排版）， 不够用，得升维处理。
-
<pre class="brush:php;toolbar:false;"></pre>最简单：内部所有空白原样保留，但默认等宽字体、不自动换行；可用 CSS 覆盖font-family和white-space - CSS 的
white-space属性更灵活：pre-wrap保留空格和换行，同时允许自动折行；pre-line只保留换行，合并多余空格；nowrap合并空格但禁止折行 - 动态内容（如从
textarea读取）要保留空格，不能直接赋值innerHTML，得先用.replace(/ /g, ' ')或设容器white-space: pre-wrap
表格空单元格怎么占位才不翻车
空 <td></td> 在 border-collapse: collapse 下可能塌陷，边框消失、高度归零。最轻量解法就是塞一个 。
- 写
<td> </td>即可，一个足够，别堆砌多个 - 别和
white-space: pre混用——表格不是文本容器，会导致单元格内意外缩进或换行 - 如果整行都空，优先用
min-height控制行高，而不是每个<td> 都塞 <code> - 导出 Excel 时
empty-cells: show配合border-collapse: separate
空格问题本质是内容语义和样式控制的边界问题。 是内容层补丁，white-space 和 letter-spacing 才是样式层正解。多数“想多加空格”的需求，其实该交给 CSS 处理，而不是在 HTML 里堆实体。
