vertical-align: bottom能立刻消除图片底部空白，因其让图片底边直接贴合行框底边，绕开baseline对齐及descender预留空间；它仅对inline/inline-block元素生效，且在flex/grid容器中被忽略。
vertical-align: bottom 为什么能立刻消除图片底部空白
因为 vertical-align: baseline 是 <img alt="如何解决CSS图片下方3px空白间隙_设置vertical-align属性" > 的默认值，而 baseline 对齐的是文字的基线（不是底线），浏览器会为潜在的 descender 字母（如 g、y）预留空间，这部分空隙就“挂”在图片下方。设为 bottom 后，图片底边直接贴到行框的底边，绕开了基线计算逻辑。
常见错误现象：vertical-align: baseline 下父容器加背景色时，图片底部明显漏出背景；用开发者工具选中图片，能看到 computed height 比实际图片尺寸大 3–5px。
-
vertical-align: bottom最稳妥，兼容所有现代浏览器，包括 IE8+ - 避免用
vertical-align: text-bottom—— 它对齐的是文字的底线（含 descender 空间），反而可能扩大缝隙 - 如果图片和文字混排，
middle更适合视觉居中，但需注意它对齐的是父元素 font-size 的 0.5ex，不是绝对居中
vertical-align 不生效？检查这三点
设置 vertical-align 却没反应，大概率是元素没处在「行内格式化上下文」中——这个属性只对 inline、inline-block、table-cell 元素起作用。
- 确认
<img alt="如何解决CSS图片下方3px空白间隙_设置vertical-align属性" >没被设成display: block或flex子项（block 元素忽略vertical-align） - 父容器不能是
display: flex或grid—— 此时对齐由align-items控制，vertical-align完全无效 - 如果用了
line-height: 0或font-size: 0清除缝隙，vertical-align仍会计算，但因行高塌陷，效果不可见，容易误判为“失效”
vertical-align: top / middle / bottom 选哪个
三者都能消除底部缝隙，但行为差异明显：
立即学习“前端免费学习笔记（深入）”；
-
top：图片顶边对齐行框顶边，适合顶部对齐场景，但若父容器有 line-height，图片下方可能仍有空（取决于内容高度） -
middle：对齐点在父元素 font-size 的 0.5ex 处（约字母 x 高度一半），常用于图文混排，但不同字体下位置浮动，不够精确 -
bottom：图片底边紧贴行框底边，最直接、最可控，推荐作为默认选择
别依赖 text-top 或 text-bottom —— 它们依赖字体度量，跨字体/系统表现不一致，移动端尤其容易出偏移。
为什么有时 vertical-align 设了还是有缝
真正顽固的缝隙往往不是 vertical-align 的问题，而是叠加了其他干扰因素：
- HTML 中
<img alt="如何解决CSS图片下方3px空白间隙_设置vertical-align属性" >标签前后存在换行或空格，被解析为文本节点，参与 IFC 布局 —— 这时即使设了vertical-align: bottom，缝隙仍来自那个“幽灵空白字符” - 父容器设置了
line-height且值较大（如line-height: 2），而vertical-align只调整元素在行框内的位置，并不改变行框本身高度 - 图片被包裹在
<a></a>或<span></span>里，而这些元素本身有默认样式（如<a></a>的 text-decoration）间接影响基线
遇到这种情况，优先检查 HTML 结构是否紧凑（删掉 img 前后换行/空格），再看是否需要配合 font-size: 0 或 display: block 组合使用 —— vertical-align 很好用，但它不是万能胶。
