该间隙不是bug，而是HTML解析器将换行符、空格等空白符渲染为宽度约0.25em的文本节点所致；可用font-size:0+子元素重设字号解决，但现代项目更推荐flex+gap。
这个间隙不是 bug，是 HTML 解析器把换行符、空格这些空白字符当作文本节点渲染出来的——它本质就是一个「空格字符」，宽度 ≈ 父容器 font-size 的 0.25em。
inline-block 间隙的根源是空白字符被当成文本节点
只要两个 display: inline-block 元素在 HTML 源码里不在同一行（哪怕只多一个换行或缩进空格），浏览器就会插入一个文本节点，内容就是那个空白字符。这个节点和普通文字一样受 font-size、letter-spacing 影响，所以间隙会随字号变大变小。
- 它只影响
inline和inline-block元素；block、flex、grid完全免疫 - 间隙不是
margin或padding，DevTools 里查不到对应样式，盒模型里也看不到留白 - 即使写了
margin: 0; padding: 0;，空隙照旧
font-size: 0 是最兼容但最易翻车的方案
font-size: 0 能让空白字符失去渲染宽度，但必须同步处理子元素字体继承问题，漏一步就全乱：
-
font-size: 0必须写在直接包裹 inline-block 子元素的父容器上，套多一层div却没设，间隙还在 - 所有含文本的子元素必须显式声明
font-size（如16px或1rem），不能只写inherit——因为父级已经是0 - 子元素若用
em单位（如line-height: 1.5、margin: 0.5em），数值会归零，得改用无单位值或px/rem -
<img alt="为什么CSS的inline-block元素之间会产生奇怪间隙" >虽无文字，旧版 Safari 中仍可能异常，建议统一加font-size: 16px - 千万别对
body或全局容器设font-size: 0，极易遗漏恢复，整页文字直接不可见
现代项目该用 display: flex + gap
如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是根治方案：
立即学习“前端免费学习笔记（深入）”；
- 间隙不再依赖源码格式，
gap精确可控，且天然忽略空白文本节点 -
gap不随font-size变化，响应式媒体查询里改字号不用同步调间距 - 删换行、加注释、用 Prettier 格式化，都不影响布局
- IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)降级
真正容易被忽略的是 legacy 代码混用多种补丁
当老代码还没重构完时，有人一边用 font-size: 0，一边又叠 transform: scale(0.99) 或 letter-spacing: -0.31em 补丁——这些补丁本身会触发新渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析。调试时根本分不清是哪个规则在起作用。
