inline-block间隙在Chrome、Safari、Firefox中宽度不同，是因为HTML换行符被渲染为空格字符，其像素宽度=父容器font-size×空格字宽系数，而Chrome约0.25em、Safari约0.28em、Firefox更保守，导致同一代码在三端分别呈现约3px/4px/3.5px间隙。
为什么 inline-block 间隙在 Chrome、Safari、Firefox 里宽度不同
这个间隙不是 margin 或 padding，而是 HTML 换行符被解析为一个空格字符，其像素宽度 = 父容器 font-size × 当前字体的空格字宽系数。不同浏览器对同一字体中空格的度量有微小差异：Chrome 约按 0.25em 渲染（16px 下≈4px），Safari 偏高（≈4px），Firefox 更保守（≈3.5px）。所以同一段 HTML + CSS，在三端视觉上就是不一致的。
用 font-size: 0 消除间隙但必须严格重置子元素字号
这是兼容 IE8+ 的最稳妥解法，但极易踩坑：
-
font-size: 0必须写在**直接包裹 inline-block 子元素的父容器**上，多套一层div却没设，间隙照旧 - 所有 inline-block 子元素必须显式写
font-size（不能只写inherit，因为继承的是 0） - 若子元素用了
em单位（如line-height: 1.5或padding: 0.5em），会算出 0px，应改用无单位数值或px/rem - 千万别对
body或全局容器设font-size: 0，整页文字可能不可见 - 旧版 Android WebView 在父容器有
transform: scale()时可能忽略该设置
现代项目优先用 display: flex + gap
如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，这是根治方案：
-
gap由 CSS 引擎直接控制，不依赖 HTML 源码结构，删换行/加注释都不影响 - 间隙宽度完全跨浏览器一致，不受字体、
font-size或渲染引擎差异影响 - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)模拟 - 若父容器是
html或body，且项目用rem，绝对不要设font-size: 0——它会崩掉整个 rem 基准
别碰 letter-spacing 和负 margin
这些看似简单，实际维护成本极高：
立即学习“前端免费学习笔记（深入）”；
-
letter-spacing: -0.31em在 Opera 下最小只到 1px，且会让文字模糊、可访问性下降 - 负
margin值随font-size变化：从 14px 改成 18px，margin-left: -4px就不够了 - Chrome 和 Safari 对空白像素化处理有 1px 差异，导致对齐抖动
- 媒体查询里调整字号时，必须同步改负 margin，极易漏掉
- 父容器加了
transform: scale()或zoom，负 margin 会失效
真正难处理的，是那些被 legacy 代码绑死、又不敢动布局结构的老页面——这时候还得回过头来调 font-size: 0，并逐层检查子元素是否漏了字号重置。
