inline-block元素间间隙是HTML解析器将换行/空格转为“空格字符”所致，受父容器font-size影响；font-size:0可消除但需重置子元素字号；flex布局更优，天然规避该问题。
为什么 inline-block 元素之间会有间隙
这个间隙不是 margin、也不是 padding，而是 HTML 解析器把换行符、空格、制表符当作一个“空格字符”渲染出来的。它参与行内布局，宽度随父容器的 font-size 变化——比如 font-size: 16px 时，间隙约 4–8px；设成 font-size: 0，那个空格就“没字号”，视觉上消失。
常见错误现象包括：
- 水平排列的导航项或图标组总对不齐，用
calc(50% - 2px)死磕也补不准 - 调试时发现
box-sizing: border-box完全没起作用，因为问题根本不在盒模型 - 加了
vertical-align: baseline（默认值）后，元素上下错位更明显，误以为是间隙变大了
用 font-size: 0 消除间隙但必须重置子元素字号
这是兼容性最好、最直接的 CSS 方案，但容易漏掉关键一步：子元素必须显式恢复 font-size。
- 父容器设
font-size: 0，间隙立即消失 - 所有
inline-block子元素必须单独设置font-size（如14px或inherit），否则文字、按钮、输入框里的文本会不可见 - 别对
body或全局容器设font-size: 0，极易遗漏恢复，导致整页文字消失 - 注意
line-height会继承0，若子元素未设line-height，文字可能被截断
示例：
.nav { font-size: 0; }
.nav > a {
display: inline-block;
font-size: 16px; /* 必须重设 */
line-height: 1.5; /* 避免继承 0 导致行高异常 */
}
负 margin 是临时补救，不推荐长期使用
用 margin-left: -4px 或 margin-right: -4px 看似简单，但问题很多：
- 负值需凭经验试，不同字体、不同浏览器下间隙宽度不一致
- 响应式场景中，间隙会随
font-size缩放，而margin是固定像素，很容易在缩放后重新露馅 - 如果子元素有
border或padding，负 margin 可能造成内容重叠或裁剪 - 无法解决
vertical-align带来的垂直错位，常要叠加vertical-align: top才勉强可用
真正该优先考虑的解法：换 display: flex
flex 布局天然不解析 HTML 空白字符，gap 还能精确控制间距，比“消除间隙”更主动。
- 把父容器的
display从inline-block改成flex，所有 hack（font-size: 0、注释、负 margin）都可以删掉 -
gap: 8px替代手动计算宽度，不用再写calc(33.333% - 5.333px)这类易错表达式 - IE10+ 支持
flex，仅 IE10–11 不支持gap；如需兼容，可用margin模拟，但只加给非末项（用:not(:last-child)） - 子元素无需改
display，flex项默认就是块级行为，vertical-align也不再生效——省去一堆对齐调试
最常被忽略的一点：当团队里有人坚持沿用 inline-block，其他人可能会叠加 transform: scale(0.99) 或乱调 letter-spacing 来“修”，结果让样式越来越难维护。间隙本身不是 bug，是 inline 布局规则的一部分；而继续在老规则上打补丁，才是真问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
