浮动元素间间隙主因是HTML空白字符被解析为文本节点参与行内布局;验证可查childNodes或设font-size:0测试;解决法包括删空白、font-size:0重置、改用flex/gird或调整vertical-align。

浮动元素间出现间隙的常见原因
这不是 CSS 的 bug,而是文档流中空白字符(换行、空格、制表符)被浏览器解析为 打开开发者工具,选中父容器,在 Elements 面板中关闭「Show user agent shadow DOM」后,逐个折叠子节点——如果间隙随某个换行/空格位置消失,基本可确认是空白文本节点作祟。 没有银弹,需按场景选择: 文本节点,参与行内布局后受浮动影响产生的视觉间隙。尤其在 或多个 并排浮动时特别明显。快速验证是否为空白节点导致
console.log(parent.childNodes) 查看是否包含 Text 类型节点font-size: 0,若间隙消失,说明是空白字符引起的行高问题消除间隙的实操方案
写成单行,或用注释连接:










