img底部空隙是因inline元素按文字排版预留descender空间所致；vertical-align: bottom可快速消除，根治需判断是否必须留在文本流中。
不是 bug，是浏览器按文字排版规则预留 descender 空间 —— 加 vertical-align: bottom 最快见效，但真要根治得先判断图片是否必须留在文本流里。
为什么 img 底部总有 2–5px 空隙
因为 <img> 默认是 display: inline，浏览器把它当字母处理，强制在基线（baseline）下方留出 descender 空间（给 g、y、p 这类下伸字母用）。哪怕周围没一个字，这个空隙也照留。它属于行框（line box）的底层排版逻辑，开发者工具里 inspect 不到，但给父容器加个背景色立刻暴露。
常见误判点：
- 把
<p>自带的margin-bottom当成图片空隙 - HTML 源码中
<img>标签后有换行或空格，被渲染为约 4px 的空白符 - 图片导出带透明底或画布未裁切（Figma/Sketch 常见），CSS 修不了
vertical-align: bottom 是图文混排场景的首选
它让图片底边直接贴住当前行框的底边，绕过 baseline 对齐，空隙归零，且不破坏图文并排能力。
立即学习“前端免费学习笔记（深入）”；
使用注意：
- 只对
inline或inline-block元素生效；加了display: block后再写这句无效 - 若父容器
line-height很大（比如line-height: 2），空隙会被放大；此时需同步控制父级行高，或临时设font-size: 0 - 在
display: flex或display: grid容器里，vertical-align直接被忽略——这些布局天然不走行内流程
display: block 是最彻底但有代价的解法
它让 <img> 退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效，空隙瞬间消失。
适用场景：
- banner、轮播图、卡片封面等独占一行的图片
- 父容器已是
flex或grid，加了也无害但其实没必要
不适用场景：
- 图标 + 文字按钮（加了就换行，文字被挤到下一行）
-
<span>或<p>内嵌小图
加了 display: block 还有缝？优先查：
- 父元素是否有
padding-bottom或margin-bottom - 图片是否被包裹在默认带外边距的标签里（如
<p>） - 图片本身是否含透明底或导出留白
真正容易被忽略的干扰源在 HTML 结构和图片源文件里
90% 的“图片底部空隙”问题，根源不在 <img> 样式本身，而在：
-
<p>、<div>这类父元素自带 margin/padding - HTML 源码中
<img>后存在换行或空格（inline 场景下渲染为可见空白） - 图片导出时未裁切、带透明底（CSS 无法干预，必须重导）
调试建议：打开 DevTools，直接看 computed styles，重点盯父级的 margin、padding 和实际盒模型高度——比反复调 vertical-align 更快定位真因。
