inline-block间隙源于html换行符被解析为空格字符，其宽度=父容器font-size×空格字宽系数，chrome约0.25em、safari约0.28em、firefox约0.22em，导致三端渲染不一致；推荐优先使用display:flex+gap方案实现跨浏览器一致。
因为 inline-block 间隙不是 margin 或 padding，而是 HTML 换行符被解析成一个“空格字符”，其像素宽度 = 父容器 font-size × 当前字体的空格字宽系数——而这个系数，Chrome、Safari、Firefox 各自实现不同。
Chrome / Safari / Firefox 的空格渲染差异
同一段带换行的 HTML，在三端实际渲染出的间隙像素值不一致：
- Chrome 约按
0.25em渲染（font-size: 16px时 ≈ 4px） - Safari 偏高，约
0.28em（≈ 4.5px） - Firefox 更保守，约
0.22em（≈ 3.5px）
这不是 bug，是各浏览器排版引擎对 Unicode 空格（U+0020）度量方式的细微差别。你改一个字体、切一次系统语言，这个系数都可能浮动。
IE8–10 和 Android 4.4 WebView 更“实诚”
这些旧引擎不优化空白处理，把换行符当真实文本节点对待，间隙几乎固定为 ≈ 0.25em，但更难消除：
-
font-size: 0单独写常无效，必须搭配zoom: 1才触发 hasLayout -
letter-spacing: -0.31em在 IE8 下最小只到 1px，且会让文字模糊 - 父容器若含
transform: scale(0.99)，负margin会完全失效（尤其 Android 4.4 WebView）
为什么 font-size: 0 不是万能解
它确实能压掉空格的视觉表现，但副作用明显：
- 子元素若用
em单位（如line-height: 1.5），会算出0px，必须改用无单位数值或px -
<img>在 IE8 下会因继承font-size: 0导致垂直对齐异常，得单独加font-size: 16px - 如果父容器是
或全局容器，又用了rem，整个基准会崩掉
现代项目该优先用 display: flex + gap
这是唯一跨浏览器行为完全一致的方案：
- 间隙由 CSS 引擎直接控制，和 HTML 源码是否换行、有没有空格完全无关
-
gap: 8px在 Chrome 89+、Firefox 63+、iOS Safari 14.1+ 中像素级一致 - IE10–11 不支持
gap，但可用margin-right: 8px+:not(:last-child)安全降级（注意：IE10 不支持:not()，得换用:last-child）
真正容易被忽略的，是那些 JS 模板动态生成、HTML 结构无法动的老页面——这时候你得一层层检查父容器是否漏了 zoom: 1，每个 <button></button> 是否显式恢复了 font-size，而不是只盯一个 font-size: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
