font-size: 0能消除inline-block间隙是因为空白文本节点宽度依赖父级字号，设为0后其视觉宽度消失；但必须在直接父容器设置，并显式重置所有子元素字号及em单位属性，否则文字消失或布局错乱。
这个间隙不是你漏写了 margin 或 padding，而是 HTML 解析器把换行符、空格当作文本节点渲染出来的“空格字符”，宽度 ≈ 父容器 font-size 的 0.25em。直接设 font-size: 0 能消，但必须重置子元素字号，否则文字真会消失。
为什么 font-size: 0 能消除间隙但容易出错
那个间隙本质是空白文本节点，它受父级 font-size 控制；设为 0 后，它失去排版依据，视觉上就没了。但副作用极强：
-
font-size: 0必须加在直接包裹 inline-block 子项的父容器上，套多一层div却没设，无效 - 所有子元素（包括
input、button、::before）都会继承font-size: 0，必须显式写font-size: 16px或1rem，不能只靠inherit - 若子元素用了
em单位（如line-height: 1.5、padding: 0.5em），计算结果归零，得改用无单位数值或px/rem -
<img alt="如何在CSS中解决inline-block元素盒模型带来的间隙问题？" >虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px
现代项目该用 display: flex + gap 替代
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是更干净的解法：
-
flex天然忽略 HTML 空白文本节点，无需删换行、加注释或调font-size -
gap精确控制间距，不随font-size变化，媒体查询里改字号也不用同步调margin - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)降级 - 避免用
margin负值补丁——缝隙宽度随font-size动态变化，Chrome/Safari 渲染差异还可能导致 1px 偏差
哪些“看起来能用”的方案实际埋坑最多
真实协作中翻车率最高的不是技术本身，而是叠加补丁：
立即学习“前端免费学习笔记（深入）”；
- 手删 HTML 换行：格式化工具一跑就还原，CI/CD 构建时被自动加回空格
- 对
body或全局容器设font-size: 0：整页文字瞬间不可见，且极难排查 - 一边用
font-size: 0，一边又加letter-spacing: -0.31em或transform: scale(0.99)补丁：这些操作本身会触发新渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析，可访问性风险在累积 - 用
word-spacing或letter-spacing负值：不同浏览器对负值的处理不一致，嵌套深时normal不一定完全还原
真正容易被忽略的是 legacy 代码还没重构完时，有人一边用 font-size: 0，一边又加补丁——补丁本身无法通过自动化测试覆盖，上线后才暴露渲染错位或文字模糊。
