内联元素间空隙源于浏览器将HTML空白字符渲染为约0.25em宽空白；font-size: 0可消除但需子元素重设字号；flex+gap是更可靠现代方案。
内联元素间空隙是怎么来的
这个空隙不是 CSS 的 bug，而是浏览器渲染内联元素时，把 HTML 中的换行符、空格、制表符等空白字符当作一个 处理，最终渲染成约 0.25em 宽的空白（受 font-size 和字体影响）。常见于 <img>、<span>、<a> 并排时出现“看不见的间隙”。
用 font-size: 0 消除空隙的实操要点
父容器设 font-size: 0 可让空白字符“失去字号”，从而不占空间；但子元素必须显式重设 font-size，否则文字会不可见。
- 只对纯布局型内联元素有效（比如图标
<img>或装饰性<span>），含文本的子元素需单独恢复字号 - 不要在 body 或全局容器上滥用，会影响可访问性和继承链
- 注意
line-height也会继承0，若子元素有行高需求，需一并重置
.container {
font-size: 0;
}
.container img {
font-size: 16px; /* 无效，img 无字体，但为保险可加 */
vertical-align: top;
}
.container span {
font-size: 14px;
line-height: 1.5;
}用 flex 布局替代 inline 更可靠
把父容器设为 display: flex，天然无视 HTML 空白，且控制间距更灵活。这是现代布局中更推荐的做法，尤其当需要响应式或对齐控制时。
-
gap属性直接定义子项间距（支持row-gap/column-gap），无需 hack - 子元素默认不换行，如需折行用
flex-wrap: wrap - 注意旧版 Safari 对
gap支持较晚（Safari 14.1+），需检查兼容性 - 若子元素是
<a>或<button>，flex 不影响语义和可访问性
.flex-container {
display: flex;
gap: 8px; /* 替代 margin 调整，更干净 */
}
.flex-container a {
white-space: nowrap;
}其他容易踩的坑
有些方案看似简单，实际副作用明显：
立即学习“前端免费学习笔记（深入）”；
- 写成
<img><img>紧挨着不换行——可解决，但代码可读性差，协作维护困难 - 用
margin-left: -4px往回拉——空隙宽度随font-size变化，不固定，响应式下易失效 - 给父元素设
letter-spacing: -0.31em——会影响子元素内文字间距，得不偿失 - 用
float+clear——已过时，清除浮动逻辑复杂，不推荐新项目使用
真正要记住的是：空隙来自文本渲染逻辑，不是 CSS 错误；font-size: 0 是快速止血，flex + gap 才是长期解法。别在 inline-block 上死磕 margin 调整了。
