HTML5空格是解析时合并空白字符，CSS white-space是渲染时控制空白显示；需区分二者，用 、pre或white-space:pre-wrap保留空格，布局间距应使用margin或gap而非空格。
HTML5 空格和 CSS 空格根本不是同一类东西：前者是 HTML 解析器对源码中空白字符的处理规则，后者是 CSS 层面对元素内/间空白的渲染控制方式。混淆它们，轻则排版错乱，重则调试半天找不到原因。
HTML5 中连续空格会被合并成一个
浏览器解析 HTML 时，默认把源码里的多个空格、制表符、换行符都当作“空白字符”，统一压缩为单个空格（除非在 <pre>、<textarea> 或设置了 white-space 的元素里）。这不是 CSS 在起作用，是 HTML 规范本身的行为。
常见错误现象：
- 写
<p>hello<span> world</span></p>，结果 “hello world” 中间只显示一个空格 - 用缩进排版 HTML 源码，误以为会反映到页面上
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要保留空格时，用
- 想让一段文本按源码格式显示（比如代码片段），包裹在
<pre>标签里 - 用 CSS 的
white-space: pre-wrap可以兼顾换行与自动换行，同时保留空格
CSS 的 white-space 控制的是渲染行为
它不改变 HTML 解析后的 DOM 文本节点内容，只决定这些文本如何被绘制出来。同一个文本节点，在不同 white-space 值下可能显示完全不同。
关键取值对比：
-
white-space: normal（默认）：合并空白 + 允许换行 -
white-space: nowrap：合并空白 + 禁止换行 → 容易撑破容器 -
white-space: pre：保留空白 + 保留换行 + 不自动换行 -
white-space: pre-wrap：保留空白 + 保留换行 + 允许自动换行（最常用）
使用场景举例：
- 用户评论里粘贴的代码段 →
white-space: pre-wrap - 导航菜单项之间加固定间距 → 不靠空格，用
margin或gap - 单行标题截断显示 →
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
别用空格当布局手段
很多人习惯在 HTML 标签之间敲空格或换行，指望产生“间隙”，尤其在 <span> 或 <inline> 元素之间。这不可靠，因为：
- 空格受父容器
font-size影响（1em 宽度） - 换行符是否生成空格，取决于 HTML 解析阶段，而非 CSS
- 移动端或不同浏览器对行首/行尾空格的处理略有差异
正确做法：
- 内联元素间距 → 用
margin（推荐margin-inline-end） - Flex/Grid 布局 → 用
gap - 纯文本内需分隔 → 用
<wbr>
/* 错误：靠换行和空格制造间隔 */
<span>Home</span><span>About</span><span>Contact</span><p>/<em> 正确：用 CSS 控制间距 </em>/
nav a {
margin-inline-end: 1rem;
}
/<em> 或用 Flex </em>/
nav {
display: flex;
gap: 1rem;
}真正容易被忽略的点是：HTML 空格压缩发生在 DOM 构建前，CSS 的 white-space 是之后才生效的渲染层策略。调试时如果看到空格没按预期出现，先查 DOM 节点里的 textContent 是什么，再看计算样式里的 white-space 值 —— 顺序反了，就永远找不到根因。
