img底部2–4px空白是因inline元素默认vertical-align:baseline需预留descender空间，非bug；vertical-align:bottom最常用，使底边贴行框底边归零空隙；display:block最彻底但破坏图文混排。
img 默认是 inline 元素，浏览器会为它预留 descender 空间（类似字母 g、y 的下延部分），导致底部出现约 2–4px 的不可见空隙——这不是 margin 或 padding，也不是 bug，而是行框排版逻辑的自然结果。
为什么 vertical-align: bottom 最常用也最稳
它让图片底边直接贴住当前行框的底边，绕过 baseline 对齐，空隙立刻归零。适用于所有需要图文混排的场景，比如按钮里的图标 + 文字、<p> 中嵌入小图。
-
vertical-align: middle不推荐单独用：依赖字体 x-height，换字体或字号就偏移 -
vertical-align: text-bottom有时更协调，但可能残留 1–2px - 在
display: flex或display: grid容器里，vertical-align直接被忽略（DevTools 里会标灰） - 如果父容器
line-height很大（如line-height: 2），空隙会被放大；此时单调img的vertical-align没用，得同步控制父级行高或临时设font-size: 0
什么时候该用 display: block
这是最彻底的解法，img 退出行内格式化上下文（IFC），baseline 对齐逻辑完全失效，空隙归零。但它会让图片强制换行，破坏图文混排能力。
- ✅ 适合 banner、轮播图、卡片封面、
<li>里独占一行的图片 - ✅ 在
flex/grid容器中加了也生效，但其实没必要——这些布局天然不产生该空隙 - ❌ 别用在按钮文字旁、
<span>内、<p>行内场景，否则文字会被挤到下一行 - ⚠️ 加了还有缝？先查三处：
<p>自带的margin-bottom、<img>标签后 HTML 换行/空格、图片导出带透明底或未裁切
空隙真正在哪？90% 不是 img 的问题
开发者工具里看到“图片下面有空”，大概率是父级盒模型在撑空间，而不是 img 自己没修好。
立即学习“前端免费学习笔记（深入）”；
-
<p>、<div>这类父元素自带margin-bottom或padding-bottom，误判成图片缝隙 -
<img>标签后存在换行或空格，在 inline 模式下被渲染为一个空白字符（约 4px 宽） - 图片本身导出时带透明底、画布留白（Figma/Sketch 导出 PNG 常见），CSS 无法干预
- 父容器
line-height过大，空隙高度 ≈ 0.25 ×line-height；临时加line-height: 0可验证，但会影响内部文字
真正要稳，得先判断这张图是否必须留在文本流里：如果答案是“否”，display: block 就是最干净的选择；如果“是”，那就得用 vertical-align: bottom 并同步检查父级 line-height 和 HTML 结构。空隙常藏在父级盒模型里，不是图片的问题。
