inline-block间隙不是bug而是HTML规范行为，源于换行符/空格被解析为U+0020文本节点，宽度≈父容器font-size的0.25em；font-size:0方案须作用于直接父容器并重置子元素字号，否则失效。
inline-block间隙不是bug，是HTML规范行为
这个空白不是你漏写了margin或padding，也不是浏览器渲染错误。它是 HTML 解析器把换行符、空格、制表符当成「文本节点」渲染出来的空格字符（U+0020），宽度 ≈ 父容器font-size的 0.25em（比如font-size: 16px时约 4px）。只要两个display: inline-block元素在源码里不在同一行，这个间隙就必然存在。
font-size: 0 方案为什么常失效？
很多人照着“父设font-size: 0，子设font-size: 16px”写，结果文字消失或布局错乱——问题出在继承链没对齐：
-
font-size: 0必须加在「直接包裹」这些 inline-block 子元素的父容器上；套多一层div却没设，无效 - 所有子元素（包括
button、input、span）必须显式声明font-size，不能只写inherit - 若子元素用了
em单位（如line-height: 1.5、padding: 0.5em），计算结果会归零；应改用无单位数值或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 不支持，需回退到margin-right: 8px :not(:last-child) - 别在已用
vertical-align对齐的旧布局上硬切flex——align-items和vertical-align行为不等价，容易错位 - 如果父容器本身是
inline或受text-align影响，切flex后要检查是否需要补width: 100%或display: block
哪些“手快解法”实际埋了雷
这些做法在协作项目中反复出问题，且很难定位：
立即学习“前端免费学习笔记（深入）”；
- 手删 HTML 换行：Prettier 一跑就还原，CI 流水线里可能直接报错
- 全局设
font-size: 0（比如加在body上）：整页文字瞬间不可见，且极难定位到根源 - 叠加
letter-spacing: -0.31em或transform: scale(0.99)：旧版 Safari 渲染模糊，屏幕阅读器仍按原始 HTML 结构解析
真正容易被忽略的是：当 legacy 代码还没重构完，有人一边用inline-block，一边又加transform: scale()或letter-spacing补丁——这些补丁本身就会触发新的渲染异常，而且无法通过自动化工具检测。
