font-size: 0能消除inline-block间隙，因其使html解析生成的空白文本节点失去字号而不可见；但子元素需显式重设font-size、line-height等继承属性，否则文字消失或布局错乱。
为什么font-size: 0能消除 inline-block 间隙
那个“看不见的间隙”本质是一个空格字符，由 HTML 源码中的换行或缩进触发，被浏览器当作文本节点渲染出来。它的宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。设成 font-size: 0 后，这个空格失去字号，自然不占空间。
设置font-size: 0后必须重置子元素字体
子元素会继承父级的 font-size: 0，导致文字不可见、line-height 失效、em 单位计算归零（如 margin: 0.5em 变成 0）。必须显式重设：
-
font-size：子元素需写具体值，如font-size: 16px，不能只靠inherit -
line-height：若依赖 em 值，也得一并重写，如line-height: 1.5（而非1.5em） -
img元素虽无文本，旧版 Safari 仍可能异常，建议也加font-size: 16px - 避免在
body或全局容器上设font-size: 0，否则易漏恢复，整页文字消失
哪些场景下font-size: 0会失效或出问题
它不是万能开关，几个关键限制必须留意：
- IE8 及更早版本对
font-size: 0抑制 inline-block 间隙的支持不稳定，老项目需额外 hack - 子元素若用
em做尺寸（如width: 20em），会按0计算，结果为 0 —— 这类写法必须改用px或rem - 如果父容器本身用了
transform: scale()或zoom，部分浏览器下font-size: 0的抑制效果会被干扰 - 团队协作中，有人加了
letter-spacing: -0.31em补丁再叠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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
