inline-block元素间间隙是HTML解析器将空白符（换行、空格）解析为文本节点所致，并非bug；解决需从HTML结构（删空白/注释）或CSS层（font-size:0、flex布局等）干预。
inline-block 元素之间的间隙不是 bug，是 HTML 解析器把换行符、空格当作文本节点渲染的结果。它无法靠 display: inline-block 自身消除，必须从 HTML 结构或 CSS 渲染层干预。
为什么 inline-block 会产生间隙
浏览器会把元素间的空白符（换行、制表、空格）解析为一个「文本节点」，而这个文本节点默认有字体大小和行高，哪怕内容为空，也会占据物理宽度（通常约 4px）。只要两个 inline-block 元素之间存在这类空白符，间隙就必然出现。
常见误判：以为是 margin 或 padding 导致；实际 inspect 元素时，间隙不属于任一子元素的盒模型，而是父容器里看不见的文本节点占位。
font-size: 0 在父元素上最常用但有兼容细节
将父容器的 font-size 设为 0，可让空白文本节点“缩成一条线”，从而视觉上消失。但子元素必须显式重置字体大小，否则文字不可见。
立即学习“前端免费学习笔记（深入）”；
-
font-size: 0对 IE6/7 有效，但 Chrome 有最小字号限制（默认 12px），需加-webkit-text-size-adjust: none - 若子元素含
input、button等替换元素，它们可能不继承font-size，需单独设font-size或用vertical-align对齐 - 如果父容器本身需要显示文字（比如带说明的导航栏），此法不适用——不能为了间隙牺牲可读性
HTML 注释法适合手写静态页但难维护
在相邻 inline-block 元素之间插入空注释 <!-- -->，能“吃掉”空白符，又不影响结构可读性。
例如：
<div class="nav"> <a href="#">首页</a><!-- --> <a href="#">关于</a><!-- --> <a href="#">联系</a> </div>
优点是零 CSS 干预、全浏览器兼容；缺点是：后台模板或 CMS 输出的 HTML 无法控制注释，且多人协作时容易被格式化工具自动删掉。
现代项目推荐 flex 替代 inline-block
真正一劳永逸的解法，是放弃 display: inline-block，改用 display: flex 布局父容器。
.nav { display: flex; } 后，子元素默认水平排列、无间隙、可设 gap 精确控制间距，且天然支持 justify-content 和 align-items。
注意点：
- IE10+ 支持
flex，如需兼容 IE9 及更早版本，不能用此方案 - flex 容器内子元素的
vertical-align失效，旧代码若依赖该属性需重调对齐方式 - 若子元素本身是
inline（如a、span），无需额外设display: block，flex 会自动处理
间隙问题本质是 inline 布局的历史包袱，越晚介入（比如等页面渲染完再 JS 操作 DOM 去空格），越容易引发布局抖动或样式错乱。优先从结构或现代布局方案入手，比打 CSS 补丁更稳。
