图片底部空隙源于inline元素的baseline对齐机制，预留descender空间导致；vertical-align仅对inline/table-cell元素生效且相对同行元素对齐，单独使用middle效果不稳定；最彻底解法是display:block或flex布局。
图片底部空隙是怎么来的
这个空隙不是图片本身留的，是行内元素默认对齐方式导致的。<img alt="CSS如何解决图片底部产生空隙_利用vertical-align属性设置" > 默认是 inline 元素，浏览器会把它当作文字来处理——基线（baseline）对齐，而基线下面还预留了放英文 descender（比如 g、j、y 的下延部分）的空间，图片就卡在这个“文字行底”里，底下自然多出几像素空白。
vertical-align: middle 为什么常被误用
vertical-align 只对 inline 和 table-cell 元素生效，且它的值不是相对于父容器，而是相对于**同一行内的其他行内元素**（或行框）对齐。所以：
- 单独一个 <img alt="CSS如何解决图片底部产生空隙_利用vertical-align属性设置" > 设 vertical-align: middle，它会去找行内“中线”，但如果没有其他内容，参考系模糊，效果不稳定
- 更常见的是设成 vertical-align: top、bottom 或 text-bottom，反而更可控
-
vertical-align: bottom：让图片底边贴住行框底边，空隙消失最直接 -
vertical-align: top：顶边贴行框顶边，适合需要上对齐的布局 -
vertical-align: text-bottom：图片底边对齐文字底部（不含 descender 空间），比bottom略高一点，有时更协调
比 vertical-align 更彻底的解法
如果图片不需要参与文本流，最干净的方式是让它脱离行内上下文：
- 改为 display: block，空隙立刻消失（因为不再有 baseline 对齐逻辑）
- 或用 display: inline-block + vertical-align: top，兼顾行内布局需求
- 用
block时注意：它会独占一行，若需图文并排，得配合float或flex - 用
inline-block时，父容器若有空白符（换行/空格），可能引入 4px 左右间隙，可删 HTML 空白或设font-size: 0抑制 - 现代项目优先考虑
display: flex容器，图片设align-self: flex-start或直接不设，默认就不产生空隙
容易被忽略的兼容性细节
老版本 IE（如 IE7）对 vertical-align 在某些场景下支持异常，尤其是和 line-height 混用时；另外：
- vertical-align 对 img 生效，但对背景图（background-image）完全无效
- 如果图片外层有 line-height 很大的文字容器，空隙可能被放大，此时单调图片没用，得同步调父级 line-height 或设 font-size: 0
真正要稳，别只盯着图片自己——先确认它是不是必须 inline，再决定动 vertical-align 还是换 display 模式。
