font-size: 0能消除inline-block间隙，因其使html解析生成的空白文本节点失去字号而不可见；但子元素必须显式重设font-size、line-height等继承属性，否则文字消失或布局错乱。
直接设 font-size: 0 能消掉 inline-block 间隙，但不重置子元素字号，文字就真会消失——这不是 bug，是继承逻辑生效了。
为什么 font-size: 0 能消除间隙
那个“看不见的间隙”本质是 HTML 解析器把换行符、空格或制表符当作文本节点渲染出来的空格字符。它的宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。设成 0 后，这个空格失去字号，自然不占空间。
但关键限制是：font-size: 0 必须作用在直接包裹 inline-block 子元素的父容器上。如果只是套了一层外层 div 设了 0，而子元素实际在内层容器里，间隙依然存在。
子元素必须显式重设 font-size 和 line-height
父容器设了 font-size: 0，所有子元素会继承该值。若没覆盖，文字不可见，line-height 计算归零，margin: 0.5em 也会变成 0，布局直接崩。
-
font-size必须写具体值，如16px或1rem，不能只靠inherit -
line-height若依赖 em，也得重写为无单位数值（如1.5）或 px 值 -
<img>虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px - 子元素内若有嵌套文字（如
<span></span>），也要确保它们能继承或重设字号
哪些场景下 font-size: 0 会失效或出问题
它不是万能开关，几个硬性限制容易被忽略：
- 父容器若用了
transform: scale()或zoom，部分浏览器下font-size: 0的抑制效果会被干扰 - 子元素若用
em做尺寸（如width: 20em），计算结果为 0 —— 这类必须改用px或rem - 团队协作中，有人叠加
letter-spacing: -0.31em补丁，反而引发图片模糊或文字挤叠 - 千万别对
或全局容器设font-size: 0，极易遗漏恢复，整页文字消失
现代项目里更推荐用 display: flex + gap
如果项目已支持 Flexbox（Chrome 89+、Firefox 63+、iOS Safari 14.1+），display: flex 是更干净的解法：它天然不解析 HTML 空白字符，gap 直接控制间距，无需操心继承、无需手动计算 calc(33.333% - 5.333px)。
真正容易被忽略的是：当 legacy 代码还没重构完，有人一边用 font-size: 0，一边又加 transform: scale(0.99) 或负 margin 补丁——这些补丁本身就会触发新的渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析，可访问性风险也在累积。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
