图片底部“幽灵空隙”源于img默认inline时按文字排版预留descender空间；display:block可彻底消除但强制换行，vertical-align:bottom最可靠且适合图文混排。
图片底部那几像素的“幽灵空隙”不是 bug，是 img 默认为 inline 元素时，浏览器按文字排版规则预留 descender 空间导致的——改 display 或调 vertical-align 都能解决，但适用场景和副作用完全不同。
为什么 display: block 能立刻消失空隙，但要小心换行
img 默认是 inline，会像字母 g 或 y 一样参与基线对齐，并在下方留出 descender 空间。设成 display: block 后，它彻底退出行内格式化上下文（IFC），baseline 对齐逻辑失效，空隙归零。
- ✅ 适合 banner、轮播图、网格项等“图片独占一行”或父容器已是
flex/grid的场景 - ❌ 不适合图标 + 文字按钮这类需图文并排的结构，因为
block会强制换行 - ⚠️ 若父容器是
flex或grid，display: block仍有效，但此时其实没必要——flex容器默认就不产生该空隙
vertical-align 生效的前提和常见误用
vertical-align 只对 inline 或 inline-block 元素起作用，且它对齐的是“同行情内元素的基线/行框边界”，不是父容器本身。
- ✅
vertical-align: bottom最可靠：让图片底边贴住行框底边，空隙消除最彻底 - ✅
vertical-align: top更适合图文混排：顶边对齐行框顶边，图标与文字顶部自然齐平 - ⚠️
vertical-align: middle效果不稳定：中线位置受字体度量影响，不同字号下结果不一致 - ⚠️ 若父容器设置了大
line-height，空隙会被放大；此时单调img的vertical-align没用，得同步控制父级行高或设font-size: 0
为什么加了 display: block 或 vertical-align 还有缝
开发者工具里看到的“图片下面的空白”，大概率不是 CSS 没生效，而是别的东西在撑空间：
- 父容器有
padding-bottom或margin-bottom（尤其是<p></p>标签自带margin） - HTML 源码中
<img>标签后存在换行或空格，触发 inline 元素间约 4px 的空白符渲染 - 图片自身导出带透明底或未裁切留白（如 Figma/Sketch 导出 PNG），CSS 无法干预
- 父容器用了
line-height: 2之类相对值，而子元素没重置字体大小，导致 descender 空间被放大
真正要稳，别只盯着 img 自己——先确认它是不是必须参与文本流，再决定动 vertical-align 还是换 display 模式。空隙常藏在父级盒模型里，不是图片的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
