font-size: 0 能消除 inline-block 间隙是因为它使换行/空格生成的空白文本节点字号为0，视觉上缩为一条线；但子元素会继承该值导致文字消失，须显式重设 font-size、line-height 等属性。
为什么 font-size: 0 能消除 inline-block 间隙
那个间隙不是 margin 或 padding，而是 HTML 换行符和空格被解析成一个「空白文本节点」，它有字号、有宽度，约等于父级 font-size 的 0.25em。把父容器设为 font-size: 0，等于让这个看不见的空格“缩成一条线”，视觉上就没了。
但子元素会继承这个 0，所以文字全消失——这不是 bug，是必然结果。
- 必须对每个 inline-block 子元素显式设置
font-size，比如font-size: 14px或font-size: 1rem - 如果子元素用了
line-height: 1.5或margin: 0.5em，它们也继承了 0，得一并重写 -
img虽无文本，但旧版 Safari 可能渲染异常，建议仍加font-size: 16px - 别在
body或全局容器上设font-size: 0，否则 em/rem 全崩，排查极难
letter-spacing 是个危险的 hack
用 letter-spacing: -0.31em 看似能“挤掉”间隙，但它不针对空白节点，而是强行压缩所有字符间距——包括子元素里的按钮文字、链接、 placeholder。
- 子元素必须手动覆盖：例如
.item span { letter-spacing: normal; } - 值不通用：
font-size: 18px时 -0.31em ≈ 6px，换成 14px 就只剩 4px，媒体查询里改字号就得同步调 - Safari 和 Chrome 对负值像素化处理常差 1px，高 DPI 屏下更不稳定
- 加了
transform: scale(0.99)或zoom的父容器会让该属性失效，调试时很难定位
vertical-align 不是解决方案，只是错觉
设 vertical-align: top 后间隙“变小了”？其实是元素上移，把底部空白遮住了，并非间隙消失。默认 baseline 会让 inline-block 底部对齐文字基线，而基线下方还有 descender 空间（比如 g、y 的下延），这部分也会被算进“间隙”高度。
-
vertical-align在font-size: 0后基本无效——那行里已无文本可对齐 - 混用图片和文字时，
vertical-align: middle比baseline更稳，但无法解决根本问题 - Flex 布局下
vertical-align完全失效，这是设计使然，不是缺陷
真正容易被忽略的点
当项目里有人坚持用 inline-block，其他人又叠加 letter-spacing 或 transform: scale() 补丁时，这些补丁本身就会相互干扰：图片模糊、文字间距错乱、屏幕阅读器语义断裂。根源始终在 HTML 文本节点——哪怕你写了 font-size: 0，DOM 里那个空白节点依然存在，只是不可见而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
