inline-block元素间空隙是HTML解析空白字符所致，并非bug；可通过font-size:0（需子元素重设字号）、HTML压缩、负margin或flex布局消除，其中flex+gap为现代推荐方案。
这不是 bug，是 HTML 解析器把换行符、空格、制表符当作一个空白字符渲染出来的结果。只要源码里写了换行或空格，inline-block 元素之间就一定会出现那个“看不见但占像素”的缝隙。
为什么 font-size: 0 能消掉缝隙
那个缝隙本质是一个“空格字符”，它的宽度由父容器的 font-size 决定。设成 0 后，空格没了字号，自然不占空间。但子元素会继承这个 0，所以必须显式重设：
.container { font-size: 0; }.item { display: inline-block; font-size: 16px; }
注意：如果子元素里有 em 单位或依赖父级字号计算的样式（比如 line-height: 1.5），重设 font-size 会连锁影响它们。
负 margin 不可靠，尤其在响应式场景下
用 margin-left: -4px 或类似值硬扣，看似快，但实际踩坑多：
立即学习“前端免费学习笔记（深入）”；
- 缝隙宽度随
font-size变化——font-size: 14px时约 4px，18px时可能变成 6px - 不同浏览器对空白字符的像素化处理略有差异，Chrome 和 Safari 下可能差 1px
- 媒体查询里改了字号，负 margin 得同步改，容易漏
- 加了
transform: scale()或zoom的父容器会让负 margin 失效
IE10+ 支持 flex，gap 是更现代的解法
如果你的项目最低支持 IE10，直接用 display: flex 是最省心的替代方案：
-
nav { display: flex; gap: 8px; }—— 缝隙由gap精确控制，不依赖 HTML 源码结构 - IE10–11 不支持
gap，但可用margin-right+:not(:last-child)模拟 - Flex 布局下，
vertical-align完全失效，不用再纠结 baseline 对齐问题 - 所有现代浏览器（包括 iOS Safari 10.3+）都支持
gap，2026 年还硬扛inline-block缝隙，等于主动维护一套过时契约
真正容易被忽略的是：当团队某人为了“兼容旧代码”继续用 inline-block，其他人会在其基础上叠加 transform: scale(0.99) 或 letter-spacing —— 这些补丁本身就会引发新的渲染异常和可访问性问题。
