图片下方有空白是因为img默认为inline元素，按基线对齐，预留descender空间；vertical-align只作用于行内格式化上下文，非父容器绝对居中；推荐解法：1. img设display:block；2. 父容器font-size:0再恢复文本字号；3. img设vertical-align:top/bottom。
图片下方为什么总有空白？
这是因为 <img alt="CSS如何处理图片下方莫名间隙_vertical-align属性的解决方法" > 默认是 inline 元素，浏览器把它当作字母（比如 x）来对齐——基线（baseline）对齐。而基线以下留有空间给英文的 descender（如 g、y 的下延部分），所以图片底部和父容器底边之间会空出几像素。
vertical-align: middle 为什么有时没用？
vertical-align 只对 inline 或 table-cell 元素生效，且它影响的是元素自身在**行内格式化上下文中的对齐位置**，不是相对于父容器的绝对居中。
- 如果父容器没有形成新的行框（比如父元素是
block且只含一张图），vertical-align仍起作用，但“middle”是相对于整行的中线，而非父盒高度中点 - 若父容器设置了
font-size: 0，空白会消失（因为行高塌陷），但可能影响子文本；更稳妥的做法是改图的显示方式 -
vertical-align: bottom或top通常比middle更可靠，因它们锚点明确
最直接有效的三种解法
按推荐顺序排列，兼顾兼容性与语义清晰度：
- 把图片设为
display: block—— 最彻底：移除 inline 特性，间隙自然消失；适合单图独立占行场景 - 父容器设
font-size: 0，再单独给图文内容恢复字号 —— 适合图文混排需保持 inline 布局时 - 图片加
vertical-align: top/bottom—— 轻量，但要注意：若父容器有其他 inline 元素，可能引发新对齐问题
示例（推荐第一种）：
<div class="wrapper"> <img src="icon.png" alt="icon"> </div>
.wrapper img { display: block; } 即可消除间隙。
Flex/Grid 布局下还用管这个吗？
不用。一旦父容器声明 display: flex 或 display: grid，子元素的 inline 行内特性就失效了，vertical-align 完全不生效，间隙也不会出现。
立即学习“前端免费学习笔记（深入）”；
但要注意：如果只是给图片本身设 display: flex，而没动父容器，那毫无意义——间隙根源在父容器的行框环境，不是图片自己。
真正要改的是包含图片的那个块级容器的布局模式，而不是在图片上打补丁。
