答案是空白字符导致的基线对齐副产物，font-size: 0 父容器方案最稳妥：父元素设 font-size: 0，子元素显式重置字号；注释或负 margin 仅临时掩盖问题；Flexbox 更干净但兼容性受限。
为什么 <img> 或 <span> 并排时总有缝隙
这不是 bug，是 HTML 解析器把换行符和空格当普通空白字符处理的结果。只要两个 display: inline-block 元素之间有换行或空格（哪怕只是回车），就会渲染出约 4px 的间隙——字体大小和行高共同作用下的基线对齐副产物。
用 font-size: 0 父容器方案最稳妥
这是兼容性好、逻辑清晰的解法：让父元素的 font-size 归零，子元素再各自设回需要的字号。注意必须同时重置子元素的 font-size，否则文字会消失。
- 只对父容器设
font-size: 0，不碰子元素 → 文字不可见 - 子元素需显式声明
font-size（如16px或1rem） - 适用于
<img>、<span>、<button>等所有inline-block场景 - IE8+ 完全支持，无副作用
.container {
font-size: 0;
}
.container > * {
font-size: 16px; /* 或其他你需要的值 */
display: inline-block;
}HTML 注释或负 margin 是临时补救
注释写法（<!-- -->）能物理删除空白，但可读性差；负 margin（如 margin-right: -4px）依赖具体数值，易受字体/行高影响，且在缩放或响应式下容易失效。
- 注释法：
<div><img><!-- --><img></div>—— 有效但维护成本高 - 负 margin 法：
margin-right: -0.25em比像素值稍稳定，但仍非可靠方案 - 两者都不解决基线对齐本质问题，仅掩盖表现
Flexbox 替代方案要小心兼容性
如果目标浏览器支持 Flexbox（IE10+），直接改用 display: flex 是最干净的解法——它天然无视空白字符，且布局更可控。
立即学习“前端免费学习笔记（深入）”；
- 父元素设
display: flex，子元素自动并排，间隙消失 - 需额外处理
flex-wrap和对齐（如align-items: flex-start避免基线错位） - 老项目若需支持 IE9 及以下，不能用此方案
- 注意：Flex 容器内子元素的
vertical-align失效
真正麻烦的不是怎么消掉那几个像素，而是得判断：这个间隙是否来自换行符、是否被 line-height 放大、子元素有没有 vertical-align 值干扰。多数人只试一种方法就停了，但实际得看上下文——比如 <img> 默认 vertical-align: baseline，这时候调 font-size 不如直接设 vertical-align: top 来得快。
