图片下方“看不见的缝隙”源于img作为行内元素默认按baseline对齐，受line-height和字体度量影响；最稳妥解法是设display: block，使其脱离行内流。
浮动图片下方文字没贴合，根本不是 margin 没加够，而是图片作为行内元素默认对齐 baseline 留出的垂直空间 —— 用 display: block 或 vertical-align 才能真正解决。
为什么图片下方总有“看不见的缝隙”？
这个间隙不是 bug，是浏览器把 img 当作行内元素（inline）处理时，按规范预留的基线（baseline）对齐空间。哪怕你没写任何文字，父容器的 line-height 和默认字体度量也会撑开这一小段空白。
- 开发者工具里选中图片父容器，看 computed 的
line-height是否继承了非零值（比如1.2或20px） - 该间隙在
font-size: 16px下最明显，约 4px 左右，缩放后会放大 -
vertical-align对已设float的元素完全无效 —— 因为浮动后它已脱离行内格式化上下文（IFC）
最稳妥的解法：给图片加 display: block
这是兼容性最好、副作用最少的方式，直接让图片退出行内流，不再参与 baseline 对齐计算。
- 写法：
img { display: block; float: left; }（或right） - 适用于绝大多数图文混排场景，尤其当图片不需与文字基线对齐时
- 注意：加了
display: block后，vertical-align就失效了，别再混用 - 如果后续文字需要左/右环绕，仍要配合
margin-right或margin-left控制水平距离
需要保持图文混排时：改用 vertical-align + inline-block
若图片必须和文字保持行内关系（比如图标嵌在句子中），就不能用 float，而应走 inline-block 路线。
- 写法：
img { display: inline-block; vertical-align: top; } -
vertical-align: top让图片顶部对齐行框顶部，消除底部空隙；middle或bottom也可按需选用 - 此时
float必须移除 ——float和vertical-align不共存 - 父容器若含真实文字，记得重置
font-size或line-height，避免被继承干扰
容易踩的坑：别碰这些“偏方”
有些看似见效快的做法，在真实项目中极易翻车：
- 用
margin-bottom: -4px往上拉文字：数值依赖字体渲染，Chrome/Firefox/Safari 表现不一致，缩放 200% 后失真 - 给父容器设
font-size: 0：虽能干掉间隙，但所有子文字全消失，必须逐个重置font-size，维护成本高 - 靠
overflow: hidden清除浮动来“顺带”压缝隙：它只解决父容器塌陷，对 baseline 间隙毫无作用，还可能裁剪阴影或下拉菜单 - 在 HTML 里删换行符压缩代码：CMS、Vue 编译、Prettier 格式化都会让它失效，不可控
真正难调的从来不是单条 CSS，而是浮动生命周期里那些边界条件：图片高度是否远超行高、屏幕阅读器能否按视觉顺序读取、缩放后 margin 是否还合理 —— 这些没法靠一条规则覆盖，得靠结构语义 + 多尺寸真机验证来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
