font-size: 0能消除inline-block间隙，因它使html解析生成的空白文本节点字号归零而不可见；但必须作用于直接父容器，且子元素须显式重设font-size、line-height等继承属性，否则文字消失或布局错乱。
这个空格缝隙不是 bug，是 HTML 解析器把换行符、空格、制表符当成一个「空白文本节点」渲染出来的结果——只要两个 inline-block 元素在源码里不在同一行，浏览器就一定会画出那个约 2–4px 的缝隙。
为什么 font-size: 0 能消除缝隙
那个缝隙本质是一个空格字符，它的宽度 ≈ 父容器当前 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。设成 font-size: 0 后，这个空白文本节点失去字号，自然不占空间。
但关键点在于：这个规则必须作用在直接包裹 inline-block 子元素的父容器上。如果只是在外层套个 .wrapper 设了 font-size: 0，而实际子元素在 .inner 里，缝隙依然存在——因为空白节点是在 .inner 内部生成的。
加了 font-size: 0 为什么文字全没了
因为 font-size 是可继承属性，子元素没重设就会继承 0。这不是失效，是预期行为。
- 每个
inline-block子元素必须显式声明font-size，比如font-size: 16px或font-size: 1rem - 如果子元素用了
line-height: 1.5或margin: 0.5em，它们也会按font-size: 0计算，结果为 0 —— 必须一并重写为具体值，如line-height: 1.4、margin: 8px -
<img>虽无文本，但在旧版 Safari 中仍可能异常，建议也加font-size: 16px - 千万别在
body或全局容器上设font-size: 0，否则所有em/rem都崩，排查极难
font-size: 0 在哪些场景下会失效或出问题
它不是万能开关，几个硬限制必须留意：
- 子元素若用
em做尺寸（如width: 20em），会按 0 计算，结果为 0 —— 这类写法必须改用px或rem - 如果父容器本身用了
transform: scale()或zoom，部分浏览器下font-size: 0的抑制效果会被干扰 - 团队协作中，有人叠加
letter-spacing: -0.31em补丁再叠font-size: 0，反而引发图片模糊或文字挤叠 - 旧版安卓 WebView（4.4 及更早）对空白字符处理更粗暴，
font-size: 0虽仍有效，但副作用更明显，比如固定高度行框残留
现代项目里要不要继续用 font-size: 0
它仍是兼容 IE8+ 的有效手段，但代价是维护成本高：每加一个新子元素，都得检查是否漏设字体和行高。
真正容易被忽略的是——当项目已支持 Flexbox（Chrome 89+、Firefox 63+、iOS Safari 14.1+），display: flex + gap 从根源绕过空白字符解析，无需操心 HTML 换行、不用重置任何继承值，且 gap 支持响应式单位（如 gap: 1rem）。如果还在用 font-size: 0，大概率是因为 legacy 代码没重构完，而不是技术上非它不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
