浏览器默认压缩连续空格为一个，是html规范的空白折叠行为；需用 实体或white-space css属性（如pre-wrap）保留空格，仅适用于预格式化文本。

HTML里敲10个空格只显示1个，不是你写错了，是浏览器按规范在压缩空白——所有“空格不生效”的问题，根源都在这个默认行为上。

为什么   用多了反而让排版更乱

它确实能强制显示一个不可换行空格，但本质是插入一个字符级占位符，不是布局工具。

• 堆砌多个   会让 HTML 体积膨胀，且屏幕阅读器可能逐个读出“空格、空格、空格”
• 在响应式场景下，  不会随容器缩放，容易导致文字溢出或错位
• 误用于表格单元格撑宽（如 <td>   </td>），实际该用 width 或 min-width
• 和 white-space: pre 混用时，普通空格也会被保留，破坏对齐逻辑

white-space 属性才是可控解法

比起硬塞实体，用 CSS 控制空白渲染方式更语义清晰、可维护性强。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 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 对齐的地方别靠空格卡位——空格是内容的一部分，不是布局胶水。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！