inline-block元素间空隙是HTML解析器将换行符和空格当作文本节点渲染所致，受父容器font-size影响，可用font-size:0+子元素重设字体、注释法、负margin或flex布局解决。
为什么 inline-block 元素之间总有看不见的空隙
这个间隙不是 bug，是 HTML 解析器把换行符和空格当作文本节点渲染的结果。只要两个 <div> 标签写在不同行、中间有空白（哪怕一个空格），浏览器就会生成一个“文本节点”，它默认按 <code>font-size 和 line-height 排版，占位、撑开行高，最终表现为元素间的缝隙。
- 常见错误现象：
inline-block布局的导航栏或图标组横向对不齐，明明设了width: 100px却总多出几像素空隙 - 只发生在 HTML 源码里有实际空白字符时；JS 动态插入、
innerHTML = ''拼接则无此问题 - 间隙大小受父容器的
font-size影响：设为0可消除，但会连带影响子元素内文字（除非重设） - 兼容性无问题，所有现代浏览器行为一致
用 font-size: 0 消除间隙但别忘了重置子元素字体
这是最直接、兼容性最好的方案，核心逻辑是让那个“看不见的文本节点”失去排版依据。
- 给父容器设
font-size: 0，子元素再单独设需要的字号，比如font-size: 14px - 注意：如果子元素含
input、button或伪元素::before/::after，它们可能继承font-size: 0导致内容不可见，必须显式重置 - 不要只给父容器加
line-height: 0—— 它压不住文本节点的基线对齐，空隙仍在 - 示例：
.nav { font-size: 0; } .nav-item { display: inline-block; font-size: 16px; }
用注释或负 margin 绕过 HTML 空白，但各有硬伤
这两种方法本质是“躲开”而非“解决”解析逻辑，适合局部微调，不适合通配或维护性要求高的项目。
- HTML 注释法：
<div class="item"></div> <!--\n--><div class="item"></div>，能彻底消灭空白节点，但让模板难读、IDE 折叠混乱 - 负 margin 法：给
inline-block元素加margin-right: -4px，值取决于当前font-size和字体，换字体或缩放就失效 - 两者都不影响盒模型计算，但负 margin 会干扰
vertical-align对齐逻辑，容易引发新错位 - 不推荐用于响应式场景——
font-size随屏幕变化时，-4px 就不再准确
flex 替代 inline-block 是更现代的解法
如果你控制得了父容器显示方式，display: flex 几乎零成本解决间隙问题，且天然支持对齐、换行、等分布局。
立即学习“前端免费学习笔记（深入）”；
- 无需处理空白字符、无需重置字体、无需猜 margin 值
- 旧版 IE10+ 支持良好；IE9 及以下不支持，需降级为
inline-block+font-size: 0 - 注意：
flex下vertical-align失效，原靠它对齐的逻辑要改用align-items或margin: auto - 示例：
.nav { display: flex; } .nav-item { flex: none; }
真正麻烦的是混合场景：父容器用了 font-size: 0，但某个子元素又需要继承外部字体设置；或者用了 flex，却要在某几个 item 上强制换行。这时候得手动切开逻辑，而不是指望一个 CSS 规则包打天下。
