空隙不是bug，是HTML解析器将换行符和空格解析为空白字符所致；优先用display:flex+gap，次选font-size:0+子元素重设字号，避免负margin或删换行等临时方案。
空隙不是 bug，是 HTML 解析器把换行符和空格当空白字符渲染的结果；直接删换行或设 font-size: 0 最快见效，但得看项目兼容性要求和是否能改 HTML 结构。
为什么 inline-block 元素之间总有 4px 左右的空隙
浏览器把源码里的换行、缩进、空格都解析成一个空白字符（相当于一个空格），而这个空格参与行内布局，宽度由父容器的 font-size 和 font-family 决定——font-size: 16px 时常见约 4px，但可能在 Chrome 下变成 8px。这不是 CSS 错了，是 HTML 文本节点本身在起作用。
常见错误现象包括：
- 间隙大小会随父容器
font-size变化，不是固定像素值 -
vertical-align: top只改变对齐方式，不消除间隙本身 - 设
margin-right: -4px是硬凑，缩放或换字体后容易失效
用 font-size: 0 父容器方案最稳妥（IE8+ 全支持）
这是兼容性最好、逻辑最清晰的纯 CSS 解法：让父元素不渲染那个“空格”，再单独恢复子元素字号。
关键点：
- 只给父容器设
font-size: 0，子元素文字会消失——必须显式重设font-size（如16px或1rem） - 子元素若含嵌套文本或伪元素（如
::before），也要检查其font-size是否被继承影响 - Chrome 有最小字体限制，加
-webkit-text-size-adjust: none更保险（老项目需考虑）
.container { font-size: 0; }
.container > * { font-size: 16px; display: inline-block; }
用 display: flex 替代是最干净的现代解法
只要目标环境支持 IE10+，这是首选——空白字符在 flex 容器里不参与布局，天然无间隙。
注意实际落地细节：
-
flex容器中vertical-align失效，别白费劲去调它 - 默认
align-items: stretch，图片常被拉高，建议加align-items: flex-start - 需要间距时，用
gap而非margin，更可控且响应式友好 - 老项目若需兼容 IE9 及以下，此方案不可用
.nav { display: flex; gap: 12px; align-items: flex-start; }
HTML 层面“吃掉”空白字符（构建阶段最省心）
与其后期用 CSS 折腾，不如让 HTML 根本不产生那个空格。适合用构建工具自动处理的项目。
可行做法：
- 手写时用注释连接：A
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
