vertical-align: bottom最稳，因图片默认baseline对齐预留descender空间，bottom使底边贴行框底边，空隙归零且保留图文混排；真因常是父级margin/padding或HTML空白。
直接用 vertical-align: bottom 就能解决，90% 场景下最稳、无副作用；别一上来就加 display: block，容易破坏图文混排。
为什么图片底下总多出 3px 空白？
不是 bug，是浏览器按文字排版规则预留的 descender 空间——img 默认 display: inline，对齐方式为 vertical-align: baseline，哪怕父容器里没文字，行框（line box）也会为字母 g/y 的下伸部留空。
这个空隙实际高度取决于字体度量和 line-height，常见 2–5px，常被误判为“3px 问题”。
-
margin/padding设为 0 无效：空隙不在盒模型里，而在行内格式化上下文（IFC）中 -
DevTools里看到“图片下面有缝”，优先查父级：<p>自带margin-bottom、<div>有padding-bottom、HTML 换行产生的文本节点（约 4px 宽） - 如果父容器是
display: flex或display: grid，vertical-align根本不生效（DevTools 会标灰），此时本就不该有这空隙
vertical-align: bottom 为什么最常用也最稳？
它让 img 底边直接贴住行框底边，绕过 baseline 对齐逻辑，空隙归零，且保留 inline 特性，不影响图标+文字按钮这类混排场景。
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: middle不推荐单独用：依赖 x-height，换字体/字号就偏移 -
vertical-align: text-bottom对齐文字内容区底部，比bottom高 1–2px，可能残留缝隙 - 若父容器设了大
line-height（如line-height: 2），单调img的vertical-align无效，得同步控制父级行高，或临时加font-size: 0
display: block 是彻底但有代价的解法
img { display: block; } 会让图片退出 IFC，baseline 对齐逻辑失效，空隙立刻消失——但它会强制换行，破坏所有需要图文并排的场景。
- 适合 banner 图、轮播图、纯图容器等无需同行文字的布局
- 若父容器已是
flex或grid，加display: block属冗余：这些布局天然不触发 baseline 空隙 - 别在按钮图标里乱加，
<button><img>文字</button>加了就断行
HTML 空格和父级盒模型才是真凶高发区
开发时反复调 vertical-align 还有缝？90% 是以下三处之一：
- 父容器用了
<p>—— 它自带margin-bottom，不是图片的问题 -
<img>标签后有换行或空格，被渲染为一个文本节点，在inline场景下产生约 4px 水平间隙（也会间接影响垂直表现） - 图片导出带透明底或画布留白（Figma/Sketch 常见），CSS 修不了，得重导资源
真正容易被忽略的干扰源在父级盒模型里。打开 DevTools 查 computed styles，重点看父级的 margin、padding 和实际盒模型高度——比反复调 vertical-align 更快定位真因。
