inline-block间隙不是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设置display: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)降级 - 别一边用
font-size: 0，一边又叠transform: scale(0.99)或letter-spacing补丁——这些补丁本身会触发新渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析
真正容易被忽略的是：legacy 代码还没重构完时，有人混用多种“补丁式”方案，结果互相干扰，调试时根本分不清是哪个规则在起作用。
