font-size: 0能消除inline-block间隙，因其使html解析生成的空白文本节点字号归零而不可见；但必须作用于直接包裹子元素的父容器，且每个子元素须显式重设font-size、line-height等继承属性，否则文字消失或布局错乱。
直接设 font-size: 0 能消除 inline-block 间隙，但必须作用在**直接包裹 inline-block 子元素的父容器**上，且每个子元素都得显式重设 font-size，否则文字会消失、line-height 失效、em 单位归零——这不是 bug，是 CSS 继承机制的必然结果。
为什么 font-size: 0 看似有效却总出问题
那个“看不见的间隙”本质是 HTML 换行符或空格被解析成的空白文本节点，它的宽度 ≈ 父容器 font-size 的 0.25em。设为 0 后它确实不占空间，但子元素无一例外继承这个 0。常见错误现象包括：
- 导航菜单文字全没了，调试器里看到
font-size: 0却找不到源头 - 按钮内文字被截断，其实是
line-height: 1.5按 0 计算成了 0 - 用
margin: 0.5em布局的子元素突然塌缩，因为 em 基准没了 - 在
body上全局设font-size: 0，整页文字消失，排查时才发现是某处漏写了恢复
font-size: 0 必须配合哪些子元素重设项
只加 font-size: 0 是半截操作。以下三项必须同步处理，缺一不可：
- 每个
inline-block子元素必须显式声明font-size，如font-size: 16px或font-size: 1rem；不能只写inherit，那还是 0 - 若子元素用了
line-height（尤其是带em的值），必须重写为具体数值，如line-height: 1.4，而非line-height: 1.4em -
img元素虽无文本，但在旧版 Safari 中仍可能因继承异常导致渲染错位，建议统一加font-size: 16px
哪些场景下 font-size: 0 会失效或引发新问题
它不是万能开关，几个关键限制常被忽略：
- 父容器若已应用
transform: scale()或zoom，部分浏览器下font-size: 0的抑制效果会被干扰，间隙重新出现 - 子元素若用
width: 20em这类 em 单位，计算基准为 0，结果就是 0 —— 必须改用px或rem - 团队协作中有人叠加
letter-spacing: -0.31em补丁，会导致图片模糊、文字挤叠，且与font-size: 0相互冲突 - 如果父容器本身含真实文字（比如标题 + 图标组混排），不能直接设
font-size: 0，得额外包一层隔离容器
现代项目里要不要继续用 font-size: 0
它仍是 IE9+ 兼容性最好的方案，但代价是维护成本高：每新增一个 inline-block 子元素，都得检查是否漏设 font-size 和 line-height。真正容易被忽略的是——当项目已支持 Flexbox（Chrome 89+、Firefox 63+、iOS Safari 14.1+），display: flex + gap 从根源绕过空白字符解析，无需操心 HTML 换行、不用重置任何继承值，且 gap 支持响应式单位（如 gap: 1rem）。如果还在用 font-size: 0，大概率是因为 legacy 代码没重构完，而不是技术上非它不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
