HTML中连续空格被合并为一个空格是规范行为；最稳妥方案是用 （不可换行空格），兼容性好且语义明确；局部留白应优先用CSS而非冗余空格或pre标签。
HTML 里直接敲空格键，浏览器会自动合并成一个空格——这不是 bug，是规范行为。
为什么 是最常用也最稳妥的空格方案
HTML 解析器默认把连续空白符（空格、换行、制表符）压缩成单个空格，所以写十个 和写一个效果一样。想强制保留多个或不可折叠的空格，必须用字符实体。
-
- 它在所有浏览器中兼容性极好，连 IE6 都支持
- 别用
- 如果只是想对齐文字或留白，优先考虑 CSS 的
margin、padding或text-indent，而不是堆
pre 标签和 white-space: pre 是替代方案，但有副作用
当你需要整块文本保持原始缩进和换行（比如代码片段、诗歌），<pre class="brush:php;toolbar:false;"></pre> 或 CSS 的 white-space: pre 确实能保留所有空格，但代价明显：
-
<pre class="brush:php;toolbar:false;"></pre>默认用等宽字体，且上下有额外margin，破坏原有排版流 -
white-space: pre会让文本完全不换行，哪怕超出了容器宽度，容易撑破布局 - 两者都不适合局部插入几个空格——它们是“全有或全无”的策略
- 如果只是想让某几个单词之间多隔一格，硬套
<pre class="brush:php;toolbar:false;"></pre>属于杀鸡用牛刀
contenteditable 元素里敲空格失效？检查父级 white-space 设置
在可编辑区域（如 div[contenteditable="true"]）里按空格没反应，大概率不是 HTML 问题，而是 CSS 干预了：
立即学习“前端免费学习笔记（深入）”；
- 父容器或自身设置了
white-space: nowrap或white-space: nowrap，会吞掉空格输入 - 某些富文本库（如 Slate、Draft.js）会拦截空格事件做快捷键处理，需查文档看是否禁用了默认行为
- 调试时可在控制台临时执行
getComputedStyle($0).whiteSpace（选中元素后运行），确认当前生效值 - 修复方式很简单：给该元素加
white-space: pre-wrap，既保留换行和空格，又允许折行
真正难的不是“怎么打出空格”，而是判断“该不该用空格”——多数时候，视觉留白应该交给 CSS 控制，HTML 只负责语义结构。手抖多打了三个 看似无害，但当它出现在按钮文案里，就可能让无障碍工具读成“提交 按钮”，反而干扰屏幕阅读器。
