img底部空白源于vertical-align:baseline导致的descender预留空间；display:block可消除但破坏行内布局，vertical-align:bottom是图文混排时最稳妥的替代方案。
img 底部多出几像素空白，不是 bug，也不是你漏写了 margin 或 padding——它是浏览器对行内元素的排版规则在起作用。
vertical-align: baseline 是根本原因
默认情况下，img 是 display: inline 的替换元素，它的 vertical-align 值是 baseline。浏览器会把它当作一个“字母”来处理：对齐到父容器的基线（baseline），而基线下方必须预留空间给 g、y、p 这类带 descender（下伸部）的字符。哪怕周围没一个字，这个空间也照留——高度约等于当前行高的 20%，通常表现为 3–5px 的空白。
这个空隙属于行框（line box）的底层结构，开发者工具里 inspect 不到，但给父容器加个背景色立刻暴露。
display: block 为什么能“秒杀”空隙？
display: block 让 img 彻底退出行内格式化上下文（IFC），不再参与 baseline 对齐，descender 预留逻辑直接失效。
- ✅ 适合 banner、轮播图、
flex/grid子项、figure主图等不需混排的场景 - ❌ 不适合按钮图标、
span内嵌小图——加了就换行，文字被顶到下一行 - ⚠️ 若父容器已是
display: flex或display: grid，display: block仍生效，但纯属冗余：这些布局模式天然不触发该空隙
vertical-align: bottom 是图文混排的唯一可靠解法
想保留 img 的 inline 特性又去空隙？vertical-align: bottom 是目前最稳的选择——它让图片底边贴住**行框底线**，绕过基线，也不依赖字体度量。
- ✅ 兼容 IE8+，不影响同行文字位置，按钮图标 + 文字并排时始终对齐
- ❌ 在
flex或grid父容器中完全无效（DevTools 会标灰，别白写） - ⚠️ 若父容器
line-height很大（如line-height: 2），单靠这句不够，得同步控制父级font-size或设font-size: 0（慎用，影响继承）
加了 CSS 还有缝？先查这三处
90% 的“还有缝”，问题不在 img 自身：
- 父容器自带
margin-bottom（尤其是p标签，默认外边距常被忽略） -
<img>标签后存在 HTML 换行或空格，在 inline 场景下会被渲染为约 4px 宽的空白符 - 图片导出带透明底或未裁切（Figma/Sketch 导出 PNG 常见），CSS 无法干预，得修图
真正要稳，得先判断这张图是否必须留在文本流里——如果答案是否定的，display: block 就是最干净的选择；如果是，vertical-align: bottom 才是正解。空隙往往藏在父级盒模型或图片源文件里，不是 img 自己的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
