font-size: 0 能消除缝隙是因为缝隙本质是父容器中被渲染的空格字符，其宽度由父级 font-size 决定；设为 0 后空格不占空间，但子元素会继承该值导致文字不可见，因此必须显式重设字号。
font-size: 0 为什么必须配子元素重设字号
因为那个“缝隙”本质是父容器里一个被渲染出来的空格字符，它的宽度由父级 font-size 决定；设成 0 后空格不占空间，但所有子元素会继承这个 0，导致文字直接不可见。这不是副作用，是 CSS 继承的必然结果。
子元素重设字号的实操要点
重设不是可选项，而是生效前提。常见疏漏点集中在以下几类：
-
font-size必须写在子元素选择器上，不能只靠inherit——父级已经是0，继承下来还是0 - 如果子元素含
<img>，它本身无文本，但若父容器用了vertical-align: baseline（默认值），仍可能因行框高度塌缩出现底部空白，需加vertical-align: top或middle - 子元素若用
em单位定义line-height（如line-height: 1.5），继承自font-size: 0后计算值为0px，文字会挤成一条线，必须显式重写line-height - 表单控件如
<input>、<select></select>默认字体常依赖系统或 UA 样式，继承0后可能异常小，需单独指定font-size和line-height
哪些地方容易漏掉重设
嵌套结构里最容易出问题，尤其当子元素本身还有子元素时：
- 导航菜单中
<a></a>是子元素，但<span></span>或图标<i></i>在其内部——如果只给<a></a>设了font-size: 14px，而没管里面<span></span>的字体，后者仍按0渲染 - 用 BEM 命名时，写成
.nav__item并设了字号，但忘了.nav__item--active这类修饰符类是否覆盖了字体设置 - 使用 CSS-in-JS 或 scoped style 时，父容器样式隔离了，但子组件未主动声明字号，导致继承链断裂后实际为
0
现代项目里更推荐的替代路径
如果你正在维护老项目或兼容安卓 4.4+ WebView，font-size: 0 仍有效；但新项目优先走 display: flex + gap：
-
gap不受字体影响，无继承污染风险 - Flex 容器内子元素不再参与 inline formatting context，天然规避空白字符渲染逻辑
- 旧版 Android 需加
-webkit-gap，iOS 14.5+、Chrome 89+ 原生支持，覆盖率已超 98% - 如果必须保留 inline-block（比如 SSR 场景下服务端未启用 Flex），那就老老实实做两件事：父设
font-size: 0，每个直系子元素都显式写font-size和line-height
最常被忽略的是：子元素里用了 em 或 rem 做宽高（比如 width: 20em），父级 font-size: 0 会让这些单位失效——这种时候别硬扛，换 px、% 或直接切 Flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
