font-size:0间隙消失怎么解决

在CSS布局中，`font-size: 0`虽能巧妙消除`inline-block`元素间的空白缝隙（本质是空格字符受父级字号影响的渲染结果），但会引发子元素文字消失、行高塌缩、表单控件异常及响应式单位失效等一系列连锁问题，因此必须为每个直系子元素显式重设`font-size`和`line-height`；而现代开发更推荐直接采用`display: flex`配合`gap`属性——它从根本上规避空白字符逻辑、无继承污染、兼容性优秀（覆盖率超98%），既简洁又健壮，尤其适合新项目或需长期维护的工程。

font-size: 0 为什么必须配子元素重设字号

因为那个“缝隙”本质是父容器里一个被渲染出来的空格字符，它的宽度由父级 font-size 决定；设成 0 后空格不占空间，但所有子元素会继承这个 0，导致文字直接不可见。这不是副作用，是 CSS 继承的必然结果。

子元素重设字号的实操要点

重设不是可选项，而是生效前提。常见疏漏点集中在以下几类：

• font-size 必须写在子元素选择器上，不能只靠 inherit——父级已经是 0，继承下来还是 0
• 如果子元素含 ，它本身无文本，但若父容器用了 vertical-align: baseline（默认值），仍可能因行框高度塌缩出现底部空白，需加 vertical-align: top 或 middle
• 子元素若用 em 单位定义 line-height（如 line-height: 1.5），继承自 font-size: 0 后计算值为 0px，文字会挤成一条线，必须显式重写 line-height
• 表单控件如 <input>、<select> 默认字体常依赖系统或 UA 样式，继承 0 后可能异常小，需单独指定 font-size 和 line-height

哪些地方容易漏掉重设

嵌套结构里最容易出问题，尤其当子元素本身还有子元素时：

• 导航菜单中 是子元素，但 或图标 在其内部——如果只给 设了 font-size: 14px，而没管里面 的字体，后者仍按 0 渲染
• 用 BEM 命名时，写成 .nav__item 并设了字号，但忘了 .nav__item--active 这类修饰符类是否覆盖了字体设置
• 使用 CSS-in-JS 或 scoped style 时，父容器样式隔离了，但子组件未主动声明字号，导致继承链断裂后实际为 0

现代项目里更推荐的替代路径