HTML 里按空格键只显示一个空格，为什么？
因为 HTML 解析器会把连续的空白字符（空格、换行、制表符）压缩成单个空格——这是规范行为，不是 bug。你在代码里敲 10 个 或连按 10 次空格键，浏览器渲染出来基本都是一个空格宽度。
和 、 的区别在哪？
它们都是空格实体，但宽度和语义不同： 是不换行空格（non-breaking space），宽度约等于一个英文字符； 是半个中文字符宽（en space）； 是一个中文字符宽（em space）。实际效果受字体影响，比如等宽字体下 ≈ 两个 ，但在微软雅黑里可能更宽。
- 需要防断行（比如“第 1 名”不让“第”和“1”被拆到两行）→ 用
- 想对齐中文标点或做轻量缩进 →
- 模拟中文段落首行缩进（2 字符）→ 用两个
CSS 的 white-space 能不能替代空格实体？
能，但得看场景。设 white-space: pre 可保留所有空格和换行，但会禁用自动换行；white-space: pre-wrap 更实用——保留空格、允许换行、不溢出容器。
- 纯文本展示（如日志、代码片段）→
white-space: pre-wrap最稳妥 - 只是想多加几个空格做视觉分隔 → 不要用 CSS，容易影响布局流，直接上
- 在
<pre class="brush:php;toolbar:false;"></pre>标签里写内容 → 默认就保留空格，不用额外处理
用 做缩进或对齐，有哪些坑？
它本质是字符，不是排版工具。大量堆砌会导致 DOM 膨胀、可访问性下降（屏幕阅读器会读成“空格空格空格…”），还可能破坏 flex/grid 的对齐逻辑。
立即学习“前端免费学习笔记（深入）”；
- 段落首行缩进 → 优先用 CSS：
text-indent: 2em - 表格内文字右对齐留空 → 用
padding-right，别在文字前塞 5 个 - 按钮里加图标间隙 → 用
margin或gap，不是 - 调试时发现空格没生效 → 检查父元素是否设置了
font-size: 0或letter-spacing: -1px，它们会让
真正要打多个空格时，别想着“怎么让空格键起作用”，而是选对工具：语义空格用实体，布局空隙用 CSS，原始空白用 white-space。混着用容易失控。
