vertical-align: bottom 最常用最稳，因图片默认 baseline 对齐会预留 descender 空隙，bottom 使其底边贴合行框底边，彻底消除空隙，兼容性好且不影响图文混排。
vertical-align 能解决图片下方空白，但只在 display: inline 或 display: inline-block 时生效；设成 display: block 或父容器是 flex/grid 时，它直接被忽略。
为什么 vertical-align: bottom 最常用也最稳
图片默认 vertical-align: baseline，浏览器会为字母 g/y 的下伸部分（descender）预留空间，导致底部几像素空隙。vertical-align: bottom 让图片底边贴住**行框（line box）底边**，不依赖文字基线，空隙彻底消失。它兼容所有现代浏览器，且不影响图文混排布局。
- 比
middle更可靠：后者对齐的是 x-height 中线，受字体、字号影响大，同一段代码在不同环境里可能位置漂移 - 比
top更自然：后者顶边贴行框顶边，在行高较大时会让图片“上浮”，和旁边文字对不齐 - 比
text-bottom更彻底：后者对齐文字内容区底部（不含 descender），仍可能残留 1–2px 空隙
为什么加了 vertical-align 还有缝？先查这三处
开发者工具里看到的“图片下面的空白”，大概率不是 vertical-align 失效，而是别的东西在撑空间：
- 父容器有
margin-bottom或padding-bottom，尤其是<p></p>标签自带margin -
<img>标签后存在换行或空格，被渲染为一个空格字符，产生约 4px 宽度间隙（仅在 inline 场景下可见） - 父容器设置了较大的
line-height（如line-height: 2），放大了 descender 空间；此时单调img的vertical-align不够，得同步控制父级行高，或设font-size: 0
vertical-align 在 flex / grid 布局里完全无效
一旦父容器设了 display: flex 或 display: grid，<img> 就变成 flex item / grid item，脱离行内格式化上下文（IFC），vertical-align 直接被浏览器忽略。此时图片对齐由 align-items 或 align-self 控制，底部空隙天然不存在。
- 别在 flex 容器里给
img写vertical-align—— DevTools 会标灰，也不起作用 - 如果用了
display: inline-flex，且外层还有文字，空隙可能以“行内 flex 容器整体参与基线对齐”的形式重现 - 真要微调对齐，用
align-self: flex-start或align-self: center，而不是碰vertical-align
真正要稳，得先判断图片是否必须 inline
空隙本质是行内排版规则的副产品，不是 bug。要不要动 vertical-align，取决于图片是否需要和文字同行显示：
- 需要图文混排（比如图标+按钮文字）→ 保留
inline，首选vertical-align: bottom - 图片独占一行（banner、头图、卡片主图）→ 直接
display: block，一劳永逸，且避免 inline 盒模型带来的各种隐式行为 - 父容器已是
flex/grid→ 不用管空隙，也不用写vertical-align，那是多余动作
那些看似有效但藏坑的写法（比如 margin-bottom: -4px、line-height: 0）依赖具体像素或全局重置，换字体、换设备、加新文字就容易翻车。空隙常藏在父级盒模型里，不是图片的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
