vertical-align能解决图片下方空白，但仅在img为inline或inline-block且父容器非flex/grid时生效；它对齐行框底边而非父容器，bottom值最稳定可靠，失效常因父级margin、html空白符或图片自身留白所致。
vertical-align 能解决图片下方空白，但只在 display: inline 或 display: inline-block 时生效；设成 display: block 后它就彻底失效——不是 bug，是 CSS 渲染模型决定的。
vertical-align 只对行内上下文起作用
浏览器不会把 vertical-align 当作“相对于父容器居中”来处理。它实际对齐的是当前行框（line box）的边界或同行情内元素的基线。如果父容器是 display: flex 或 display: grid，img 已经变成 flex item 或 grid item，vertical-align 直接被忽略。
常见误判场景：
- 给
img加了vertical-align: bottom，但父div设了display: flex→ 不生效 - 外层套了个
span或p，而该标签本身有默认margin-bottom→ 看似是图片空隙，实为段落外边距 -
img是行内唯一元素，没其他同行内容 →vertical-align: middle行为不可靠，因缺乏对齐参考
vertical-align: bottom 是最稳的取值
相比 middle 或 top，bottom 对齐目标明确：让图片底边紧贴当前行框的底边，不依赖字体度量或 x-height 计算，兼容性好、效果可预期。
适用条件：
- 图片需与文字并排（如按钮图标 + 文字）
- 父容器保持文本流（未用 flex/grid）
- 行高（
line-height）未被意外放大（否则行框底边下移，空隙仍可见）
若父容器 line-height 很大，单调 img 的 vertical-align 没用，得同步控制父级行高或设 font-size: 0（但后者需重置子文字字号）。
为什么加了 vertical-align: bottom 还有缝？先查这三处
DevTools 里看到的“图片下面有空”，90% 不是 vertical-align 失效，而是干扰源藏在别处：
- 父元素有
padding-bottom或margin-bottom（尤其p标签自带margin） - HTML 源码中
<img>标签后存在换行或空格 → 渲染为一个空格字符，产生约 4px 宽度间隙（仅 inline 场景下可见） - 图片自身导出带透明底或未裁切（如 Figma/Sketch 导出 PNG 常见），CSS 无法干预，得修图
真正要稳，别只盯着 img 自己——先确认它是不是还在行内流里，再决定动 vertical-align 还是换 display 模式。空隙常藏在父级盒模型里，不是图片的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
