HTML中连续空格会被浏览器合并为一个，需用 、 、 等实体或CSS实现多空格效果； 防折行， 窄空格微调对齐， 全角空格适配中文排版。
HTML里打空格不能只靠键盘空格键
直接敲空格键，在HTML中连续多个空格会被浏览器合并成一个，且首尾空格会被忽略。这不是bug，是HTML规范行为。要真正显示多个空格或保留格式，得用特殊字符或CSS控制。
、 、 的区别和适用场景
它们都是HTML空格字符实体，但宽度不同：
-
-
-
注意： 和 在部分老旧浏览器（如IE9以下）支持不完整，生产环境建议优先用 或CSS替代。
标签页切换时的空格问题：其实是tabindex和焦点样式惹的祸
所谓“标签页切换空格符号影响”，通常不是空格本身的问题，而是tabindex设置不当 + 浏览器默认焦点样式（如outline）与周围空白区域叠加，造成视觉错位或布局跳动。常见表现：
立即学习“前端免费学习笔记（深入）”；
- 按
Tab切换到某个按钮后，按钮周围多出一块“空白高亮区” - 使用
display: inline-block的导航项之间出现意外缝隙——本质是HTML中换行符+空格被渲染为一个空格字符 - 用
contenteditable编辑区域里，按Tab插入的是制表符\t，而非空格，导致缩进异常
解决方法：
- 移除行内元素间的换行和空格：
<nav><a href="#">首页</a><a href="#">关于</a></nav>
- 或用CSS清除间隙：
a { display: inline-block; margin-right: -4px; }（粗暴但有效） - 或用
font-size: 0在父容器上消除空格渲染：nav { font-size: 0; } nav a { font-size: 16px; }
真正需要空格语义时，别硬塞
如果目标是文字对齐、缩进或段落间距， 只是权宜之计，长期看会污染语义、增加维护成本。更合理的方式：
- 缩进首行：用CSS
text-indent - 段落间距：用
margin或padding - 等宽对齐（如代码块）：用
<pre>+white-space: pre - 需要“可访问的空格占位”（比如表格中空单元格）：用
最易被忽略的一点：所有这些空格字符在DOM中都是真实节点，会影响childNodes.length和textContent结果，做DOM遍历或文本提取时务必留意。
