font-size: 0后仍有微小间隙，根本原因是line-height非零导致行框残留；需同时设line-height: 0并显式重置子元素的font-size、line-height及em单位属性，或改用flex+gap布局。
font-size: 0 后仍有微小间隙，大概率不是 font-size 没生效
根本原因在于：那个“间隙”并非只由 font-size 单独决定，而是由 line-height 和空白字符的渲染行为共同作用的结果。即使父容器 font-size: 0，只要 line-height 是非零数值（比如 line-height: 1.2 或未显式重置），浏览器仍可能基于行高生成微小的行框空间，尤其在子元素含文本、img 或伪元素时表现明显。
常见错误现象：
- 开发者工具里看到父容器 computed
font-size确实是0px，但元素间仍有 1–2px 不规则缝隙 - 用
vertical-align: top无效，margin: -1px才勉强对齐 - 同一组
inline-block中，带文字的项和纯img项底部错位
为什么 line-height: 0 才能真正压平间隙
line-height 控制的是行框（line box）的高度，而 HTML 空白符（换行/空格）作为匿名文本节点，必须存在于某个行框中。当 line-height: 0 时，该行框高度坍缩为 0，空白符失去“立足之地”，自然不占空间——这比仅设 font-size: 0 更彻底。
但要注意副作用：
-
line-height: 0会继承给子元素，导致文字行距归零、多行文本叠在一起 - 子元素必须显式重置
line-height（如line-height: 1.5或line-height: 20px） - 若子元素用了
em单位定义padding或margin，也会因font-size: 0失效，需一并重写为px或rem
哪些元素容易漏掉重置，导致间隙残留
很多人只记得重设 font-size，却忽略以下三类常见“隐形继承者”：
-
input、select、button：它们默认字体常来自用户代理样式表，若父级font-size: 0且未显式覆盖，内部文字可能不可见或排版异常 -
img元素本身虽无文本，但在旧版 Safari（iOS 14 及更早）中，若其父容器line-height非零，仍可能与相邻inline-block文字产生基线对齐偏差 - 伪元素（
::before/::after）：如果内容是空格或content: " "，它会继承父级font-size: 0，但若没显式设font-size，就可能意外撑开间隙
比 font-size: 0 更稳的替代方案
如果你发现反复调试 font-size + line-height 仍不稳定，建议直接切换布局模型：
- 用
display: flex替代inline-block，配合gap属性控制间距（gap: 0彻底无隙），现代浏览器全覆盖（Chrome 84+/Safari 14.1+/Firefox 63+） - 若需兼容 IE11，可用
float: left+overflow: hidden触发 BFC 清除塌陷，同时避免行内格式化上下文（IFC）介入 - HTML 层面移除空白：把标签写成
<div>...</div> <div>...</div>一行，而非换行缩进——适合构建脚本生成的 DOM，不适合手写维护的模板
最易被忽略的一点：间隙是否真的来自空白字符？先打开开发者工具，选中父容器，看 Computed 面板里 font-size 和 line-height 是否都为 0px；再右键子元素 → “Edit as HTML”，删掉所有换行和空格再实时观察——如果此时间隙消失，那问题就锁定在 HTML 解析层面，而非 CSS 渲染逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
