inline-block间隙本质是HTML换行符渲染为空格字符，其像素宽度由父容器font-size和字体空格字宽决定，不同浏览器对空格度量存在差异，导致Chrome约3px、Safari约4px、Firefox约3.5px间隙。
为什么 inline-block 间隙在 Chrome、Safari、Firefox 里宽度不同
这个间隙本质是 HTML 换行符被渲染成一个空格字符，而它的像素宽度由父容器的 font-size 和当前字体的空格字宽共同决定。不同浏览器对相同字体中空格的度量存在微小差异——比如 Chrome 可能按 0.25em 渲染，Safari 在某些字号下会算成 0.28em，Firefox 则更保守。结果就是：同一段 HTML + 同一套 CSS，在三个浏览器里分别出现约 3px / 4px / 3.5px 的间隙，肉眼可辨。
用 font-size: 0 消除间隙但要避开继承陷阱
设父容器 font-size: 0 是最直接的解法，它让那个“空格字符”失去字号，从而不占空间。但副作用明显：
- 所有子元素会继承
font-size: 0，文字直接消失，必须显式重设 - 如果子元素用了
em单位（比如line-height: 1.5或padding: 0.5em），这些值会按 0 计算，变成 0px - 嵌套较深时（如按钮里有 span），容易漏写
font-size，导致部分文本不可见 - IE8 不支持该方案，若项目仍需兼容，得额外加
zoom: 1或改用其他 fallback
不同浏览器下 font-size: 0 的兼容表现
现代浏览器（Chrome 60+、Firefox 55+、Safari 10.1+、Edge 16+）都支持 font-size: 0 抑制 inline-block 间隙。但要注意两个边界情况：
- iOS Safari 9.3 及更早版本对
font-size: 0的处理不稳定，偶尔仍会残留 1px 间隙 - 当父容器同时设置了
transform: scale()或zoom，部分旧版 Android WebView 会忽略font-size: 0的效果 - 若父容器是
或，全局设font-size: 0会导致所有rem基准崩掉，绝对不要这么干
比 font-size: 0 更稳的现代替代方案
如果你控制得了最低支持版本（IE10+），display: flex + gap 是唯一推荐路径：
立即学习“前端免费学习笔记（深入）”；
.nav { display: flex; gap: 8px; }
.nav-item { flex: none; }
它彻底绕开 HTML 空白字符问题，间隙由 CSS 控制，不随字体变化，跨浏览器表现完全一致。IE10–11 不支持 gap，但可用 margin-right: 8px 配合 :not(:last-child) 模拟。真正难处理的，是那些被 legacy 代码绑死、又不敢动布局结构的页面——这时候还得回过头来调 font-size: 0，并逐层检查子元素是否漏了字号重置。
