最稳妥解法是父容器设 font-size: 0 并显式重设子元素 font-size 和 line-height；空隙源于 html 空白字符渲染，宽约 0.25em；flex + gap 是现代推荐方案。
直接设 font-size: 0 在父容器上，再给每个 inline-block 子元素显式重设 font-size 和 line-height，是最稳妥、兼容性好（IE8+）的解法。但不重置，文字就真会消失——这不是 bug，是继承逻辑在起作用。
为什么 inline-block 元素之间会有空隙
空隙不是你漏写了 margin 或 padding，而是 HTML 解析器把换行符、空格、制表符当作文本节点渲染出来的「空格字符」。它的宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。只要两个 display: inline-block 元素在源码里不在同一行，这个空隙就存在。
它只影响 inline 和 inline-block 元素；display: block 或 flex 完全不受影响。
用 font-size: 0 消除空隙的关键操作
这个方法有效，但必须严格满足以下条件：
-
font-size: 0必须写在**直接包裹 inline-block 子元素的父容器**上，套多一层 div 却没设，空隙照旧 - 所有子元素必须显式重设
font-size，不能只写inherit—— 因为父级已经是 0，继承后就是 0 - 若子元素用了
em单位（如line-height: 1.5或margin: 0.5em），结果会归零，需改用无单位数值（如line-height: 1.5）或 px/rem -
<img>虽无文字，但在旧版 Safari 中可能异常，建议统一加font-size: 16px - 千万别对
body或全局容器设font-size: 0，极易遗漏恢复，整页文字直接不可见
为什么负 margin 不适合生产环境
看似简单，实际维护成本高：
- 空隙宽度随
font-size变化：从14px改成18px，margin-left: -4px就不够了 - Chrome 和 Safari 对空白像素化处理有 1px 差异，导致对齐抖动
- 父容器加了
transform: scale()或zoom，负 margin 会失效 - 媒体查询里调整字号时，必须同步改负 margin 值，极易漏掉
- 叠加
letter-spacing: -0.31em补丁，反而让图片模糊、文字挤叠
现代项目更推荐用 display: flex + gap
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是根治方案：
-
gap精确控制间距，不依赖 HTML 源码结构，删换行/加注释都无需操心 - 天然忽略空白文本节点，不用处理继承、不用计算
calc(33.333% - 5.333px) - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)降级 - 团队协作中，有人一边用
inline-block，一边叠加transform: scale(0.99)补丁——这本身就会触发新渲染异常，且屏幕阅读器仍按原始 HTML 解析，可访问性风险在累积
真正容易被忽略的是：空隙问题从来不是孤立存在的。它常出现在 legacy 代码未重构完的场景里，而补丁式修复（比如 font-size: 0 + transform + letter-spacing 组合）会让后续调试越来越难，且无法通过自动化工具检测。优先用 flex/gap，实在要保 inline-block，就老老实实做 font-size 重置，别绕弯子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
