图片底部空白源于 img 默认 inline 触发行内格式化上下文为 descender 预留空间；vertical-align: bottom 最稳，display: block 彻底消除但破坏图文混排，真因多在父级 margin/padding 或 html 空白。
图片底部多出几像素空白，不是 bug，是 img 默认 display: inline 触发行内格式化上下文（IFC）时为 descender 预留的空间——哪怕周围没文字，浏览器也照留。直接调 margin 或 padding 无效，得从排版逻辑入手。
vertical-align: bottom 是最稳的 inline 解法
它让 img 底边贴住行框（line box）底边，绕过 baseline 对齐，空隙归零。保留 inline 特性，不破坏图文混排，兼容所有现代浏览器。
-
vertical-align: middle没参考系，换字体/字号就偏移，位置飘 -
vertical-align: text-bottom对齐文字内容区底部，比bottom高 1–2px，可能残留缝隙 - 父容器若设了
line-height: 2，空隙会被放大；此时单调img的vertical-align不管用，得同步控制父级行高或临时设font-size: 0 - 一旦父容器是
display: flex或display: grid，vertical-align直接被忽略（DevTools 里会标灰），此时空隙本就不存在
display: block 能彻底消除但代价明确
img { display: block; } 一加，空隙立刻消失。因为它让 img 退出行内格式化上下文，baseline 对齐逻辑失效。
- ✅ 适合 banner、轮播图、Grid/Flex 项等“图片独占一行”或父容器已是布局容器的场景
- ❌ 不适合图标 + 文字按钮、
span内嵌小图——加了就换行，文字被挤到下一行 - ⚠️ 若父容器是
flex或grid，display: block仍生效，但纯属冗余：这些布局天然不产生该空隙
加了样式还有缝？先查三处真因
开发者工具里看到“图片下面有空”，90% 不是 img 自己的问题，而是父级在撑空间：
-
<p></p>自带margin-bottom、<div> 类元素有 <code>padding-bottom，误判成图片缝隙 -
<img>标签后有 HTML 换行/空格（渲染为约 4px 空白符），仅在 inline 场景下可见 - 图片导出带透明底或画布留白（Figma/Sketch 常见），CSS 修不了，得重导
真正容易被忽略的干扰源在父级盒模型里
空隙常藏在上一级，而不是图片本身。打开 DevTools 查 computed styles，重点看父级的 margin、padding 和实际盒模型高度——比反复调 vertical-align 更快定位真因。如果父容器是 inline-flex 或外层还有文字流，对齐行为会更复杂，此时别只盯着 img 加样式。
