图片底部空隙不是bug，是img默认inline时按文字排版预留descender空间所致；display:block可彻底消除但强制换行，vertical-align:bottom最可靠且适合图文混排。
图片下方那几像素空隙不是 bug，是 img 默认为 inline 元素时，浏览器按文字排版规则预留 descender 空间导致的——改 display: block 或调 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 模式。最容易被忽略的是：空隙看起来在图片下面，实际可能来自外层 <p></p> 的 margin，或者 HTML 换行产生的空白字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
