最稳妥解法是父容器设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 解析器把换行符、空格、制表符当作文本节点渲染出来的空格字符（U+0020）。它属于行内格式化上下文（IFC）的正常行为，宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。只要两个 display: inline-block 元素在源码里不在同一行，这个空格就存在。
它只影响 inline 和 inline-block 元素；display: block 或 flex 完全不受影响。
font-size: 0 必须写对位置且子元素必须重置
这个方法有效，但必须严格满足以下条件：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
font-size: 0必须写在直接包裹inline-block子元素的父容器上。套多一层div却没设，空隙照旧 - 所有子元素必须显式重设
font-size，不能只写inherit——因为父级已经是 0，继承后就是 0 - 若子元素用了
em单位（如line-height: 1.5或margin: 0.5em），计算结果为 0，需改用无单位数值（如line-height: 1.5）或px/rem -
<img>虽无文本，但在旧版 Safari 中可能异常，建议统一加font-size: 16px
现代项目更推荐用 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)降级
真正容易被忽略的是：当 legacy 代码还没重构完，有人一边用 font-size: 0，一边又叠加 transform: scale(0.99) 或 letter-spacing: -0.31em 补丁——这些补丁本身就会触发新的渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析。
