CSS如何解决图片下方有间隙的问题：通过vertical-align属性调整

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 一招毙命，比所有对齐值都省心。