浏览器默认压缩连续空格为一个，是HTML规范的空白折叠行为；需用 实体或white-space CSS属性（如pre-wrap）保留空格，<pre>仅适用于预格式化文本。
HTML里敲10个空格只显示1个，不是你写错了，是浏览器按规范在压缩空白——所有“空格不生效”的问题，根源都在这个默认行为上。
为什么 用多了反而让排版更乱
它确实能强制显示一个不可换行空格，但本质是插入一个字符级占位符，不是布局工具。
- 堆砌多个
- 在响应式场景下，
- 误用于表格单元格撑宽（如
<td> </td>），实际该用width或min-width - 和
white-space: pre混用时，普通空格也会被保留，破坏对齐逻辑
white-space 属性才是可控解法
比起硬塞实体，用 CSS 控制空白渲染方式更语义清晰、可维护性强。
-
white-space: pre-wrap：最常用，保留源码空格与换行，同时允许自动折行（适合地址、日志等含空格的文本） -
white-space: pre-line：合并连续空格，但保留换行符（适合从富文本编辑器粘贴过来的内容） -
white-space: nowrap：合并空格 + 强制单行（注意：中间多个空格仍会被压成一个，别指望靠空格分隔图标和文字） - 不要给按钮或链接设
white-space: pre——它会把标签内换行也当真实空白渲染，破坏内联流
inline-block 元素间莫名多出 4px 间隙怎么消
这不是 bug，是浏览器把源码中换行符解析成了一个空格，再按当前 font-size 渲染出的宽度。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥：父容器加
font-size: 0，子元素单独恢复字号（button、input等表单控件兼容性良好） - 可读性优先：用注释“吃掉”空白，如
<button>–</button><!-- --><input><!-- --><button>+</button> - 长期方案：直接改用
display: flex或grid，它们天然忽略源码空白 - 避免用
margin负值硬调——不同字体下间隙宽度浮动，移动端易失效
真正需要精确空格控制的场景其实不多：代码块、诗歌、固定格式日志。其余多数情况，该用 padding 的地方别堆 ，该用 flex 对齐的地方别靠空格卡位——空格是内容的一部分，不是布局胶水。
