inline-block元素间间隙源于HTML解析空白符为“空格字符”，宽度由父font-size决定；可用font-size:0（需子元素重设字号）、flex+gap（推荐）或删源码空格解决，负margin因响应式问题不推荐。
这个间隙不是你漏写了 margin 或 padding，而是 HTML 解析器把换行符、空格、制表符当成了一个“空格字符”渲染出来的——只要两个 inline-block 元素在源码里不在同一行，浏览器就会画出那个约 4–8px 的缝隙。
为什么 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: 0 计算，结果变成 0，导致内容塌陷或错位。
为什么负 margin 不推荐在生产环境用
看似简单，实际踩坑多：
立即学习“前端免费学习笔记（深入）”；
- 缝隙宽度随
font-size变化——font-size: 14px时约-4px，换成18px就得调成-6px - Chrome 和 Safari 对空白像素化处理略有差异，可能差 1px
- 加了
transform: scale()或zoom的父容器会让负margin失效 - 媒体查询里改了字号，负
margin得同步改，容易漏
现代项目该用什么替代方案
如果你的最低支持浏览器是 IE10+，直接用 display: flex 是最省心的：
-
nav { display: flex; gap: 8px; }—— 缝隙由gap精确控制，不依赖 HTML 源码结构 - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)模拟 -
vertical-align在 flex 下完全失效，反而省去对齐调试的麻烦
真正容易被忽略的是：当团队某人为了“兼容旧代码”继续用 inline-block，其他人会在其基础上叠加 transform: scale(0.99) 或 letter-spacing 补丁——这些操作本身就会引发新的渲染异常和可访问性问题。
