最省心解法是display:flex+gap，因它天然忽略HTML空白文本节点且gap精确可控；间隙源于HTML解析器将换行/空格渲染为0.25em宽的空格字符，font-size:0方案需严格满足父容器设0、子元素重置字号等条件。
直接用 display: flex + gap 是最省心的解法，只要不需支持 IE10 及更老版本；否则才考虑 font-size: 0，但必须严格满足重置条件，漏一条就文字消失或布局崩。
为什么 inline-block 元素之间总有间隙
这个间隙不是你写错了 margin 或 padding，而是 HTML 解析器把换行符、空格、制表符当作文本节点渲染出来的「空格字符」。它宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。只要源码里两个 inline-block 元素不在同一行，这个间隙就必然存在。
所有现代浏览器行为一致，包括 Chrome、Firefox、Safari、Edge —— 这不是 bug，是规范行为。
font-size: 0 方案怎么写才真正生效
这个方案兼容 IE8+，但极易因遗漏细节而失效。关键点全在继承链上：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 0必须设在「直接包裹」inline-block子元素的父容器上，套多一层div却没设，无效 - 每个含文本的子元素（包括
button、input、span）必须显式声明font-size，如16px或1rem，不能只靠inherit - 若子元素用了
em单位（如line-height: 1.5、padding: 0.5em），计算结果会归零；应改用无单位数值（line-height: 1.5）或px/rem -
<img alt="怎么解决CSS中inline-block元素在不同浏览器下产生间隙的问题？" >虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px
flex + gap 替代 inline-block 的实际约束
这是当前新项目的首选，但得确认你的目标浏览器支持范围：
-
gap在 Chrome 89+、Firefox 63+、iOS Safari 14.1+、Edge 90+ 原生支持 - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)回退 - 别在已用
vertical-align对齐的旧布局上硬切 flex ——align-items和vertical-align行为不等价，容易错位 - 如果父容器本身是
inline或受text-align影响，切 flex 后要检查是否需要补width: 100%或display: block
哪些“看起来能用”的做法其实埋了雷
这些方法在真实协作项目中反复出问题：
- 手删 HTML 换行：格式化工具（Prettier、ESLint）一跑就还原，CI 流水线里可能直接报错
- 全局设
font-size: 0（比如加在body上）：整页文字瞬间不可见，且极难定位到根源 - 叠加
letter-spacing: -0.31em或transform: scale(0.99)：旧版 Safari 渲染模糊，屏幕阅读器仍按原始 HTML 结构解析，可访问性风险实打实存在 - 对
inline-block元素加float再清除浮动：触发 BFC 后影响外边距合并，响应式下更难控制
真正容易被忽略的是：legacy 代码还没重构完时，有人一边用 font-size: 0，一边又加负 margin 补丁——补丁本身会触发新的渲染异常，而且无法通过自动化测试覆盖。
