HTML中直接敲空格无效，因浏览器按规范将连续空白字符合并为一个空格；应优先用CSS（如text-indent、margin、white-space）控制排版，仅在防断行场景（如“第 1 章”）慎用。
HTML里直接敲空格为什么没用？
因为浏览器默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，这是HTML规范定义的“空白折叠”行为。你写十个 或敲十次空格键，在渲染结果里通常只显示一个空格。
什么时候该用、什么时候不该用？
是“不换行空格”，它强制保留一个不可折叠、不可换行的空白位置。但滥用会导致语义混乱和维护困难。
- 适合场景：中文标点前强制不换行（如「第 1 章」）、单位与数字之间（如「100 px」）、避免孤字换行（如「Mr. Smith」）
- 不适合场景：段落缩进、模块间距、布局对齐——这些该用CSS的
margin、padding或text-indent - 注意：
CSS替代方案比 更可控
真正做排版控制，应该优先用CSS。比如想让段首缩进两个汉字宽度：
p {
text-indent: 2em;
}
想在两个按钮之间留出固定间隙：
立即学习“前端免费学习笔记（深入）”；
.btn + .btn {
margin-left: 16px;
}
-
white-space: pre或pre-wrap可保留原始换行和空格，但仅适用于代码块、诗歌等特殊文本 -
letter-spacing和word-spacing调整字距词距，但不解决“占位”需求 - 用
遇到“空格显示异常”先查什么？
如果发现空格没按预期显示，别急着加 ，先确认：
- 是不是父容器用了
white-space: nowrap导致文本溢出被截断 - 是不是字体本身对空格宽度做了特殊处理（某些等宽字体下
- 是不是CSS设置了
font-feature-settings: "kern" 0关掉了字距调整，间接影响空格视觉效果 - 检查开发者工具的“Computed”面板，看
white-space和font-family是否符合预期
空格问题表面简单，但根源常在CSS继承链或字体渲染细节里，盲目堆 只会掩盖真实问题。
