vertical-align 对 img 生效的前提是：img 必须处于行内格式化上下文（ifc）中，即其父容器不能是 flex 或 grid 布局，且 img 本身不能被设为 block 等非 inline 水平显示；它对齐的是同行情内元素的基线或行框边界，而非父容器。
vertical-align 对 img 生效的前提是什么
vertical-align 只对 display: inline 或 display: inline-block 的元素起作用，img 默认就是 inline，所以能用——但很多人加了 vertical-align: middle 没效果，是因为它根本没参考物。
这个属性不是相对于父容器上下居中，而是相对于“同一行内其他行内元素的基线/中线/顶边”来对齐。如果 img 是行内唯一元素，浏览器找不到对齐锚点，行为就不可靠。
- 必须确保父容器是行内格式化上下文（IFC），比如未设置
display: flex或display: grid - 避免在
img外层套div同时又设了display: block—— 那时vertical-align直接失效 - 若父容器有
line-height，它会放大间隙；此时单调img的vertical-align不够，得同步控制父级行高
vertical-align: bottom 和 vertical-align: text-bottom 有什么区别
两者都常用来“压掉”底部空隙，但对齐基准不同：
-
vertical-align: bottom：让img底边贴住**行框（line box）的底边**，最干脆，空隙消失最彻底 -
vertical-align: text-bottom：让img底边对齐**文字内容区域的底边**（即字母 x 的下边缘，不含 descender 空间），视觉上比bottom略高一点，有时和旁边文字更协调 -
vertical-align: top：对齐行框顶边，适合图标+文字按钮这类需要顶部对齐的场景
别用 vertical-align: middle 去“碰运气”，它对齐的是行内元素的中线，而中线位置受字体度量影响，不同字体、不同字号下结果不一致。
为什么加了 vertical-align 还有缝？常见干扰项
开发者工具里看到的“图片下面的空白”，大概率不是 vertical-align 没生效，而是别的东西在撑空间：
- 父容器设置了
padding-bottom或margin-bottom，误判为图片空隙 -
img被包在p标签里，而p默认有margin-bottom - HTML 源码中
img标签后有换行或空格，触发了inline元素间的空白符渲染（约 4px），这时要清空空白或设父容器font-size: 0 - 图片本身导出带透明底或留白（比如 Sketch / Figma 导出 PNG 未裁切），CSS 无能为力，得修图
遇到“明明写了 vertical-align: bottom 还是有缝”，先在 DevTools 里把 img 的 computed height 和 margin 展开看，再往上逐层检查父级盒模型。
vertical-align 在现代布局中还值得优先用吗
在 Flex 或 Grid 容器里，vertical-align 对 img 完全无效——它只活在 IFC 里。如果你的项目已用 display: flex 布局图文并排，直接忽略这个属性。
- Flex 容器中，用
align-items: flex-start或align-self: flex-start控制图片垂直位置，干净且可预测 - Grid 中同理，
align-self或justify-self更直接 - 仍需兼容 IE8–IE10？那
vertical-align: bottom+font-size: 0是较稳妥组合，但注意font-size: 0会让子元素文字消失，得显式重设
真正关键的判断点从来不是“怎么调 vertical-align”，而是“这张图是否必须保持 inline 行为”。如果不是，display: block 一招毙命，比所有对齐值都省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
