img底部空隙源于其inline-replaced特性导致的基线对齐下行间距，display:block是最直接解法；vertical-align仅对inline/inline-block有效，float后失效；line-height:0或font-size:0有副作用，不推荐优先使用。
为什么 img 在浮动布局中底部总有空隙
这是因为 <img alt="css 浮动布局中图片下方空隙如何处理_通过 display 属性调整说明" > 默认是行内替换元素（inline-replaced），浏览器会为其预留**基线对齐所需的下行间距**（即字母 g、y 等下沉部分的空间），即使父容器用了 float，这个默认行为依然存在。空隙不是 margin 或 padding，而是 line-height 和 vertical-align 共同作用的结果。
display: block 是最直接有效的解法
将图片设为块级元素，彻底脱离行内布局上下文，自然消除基线对齐带来的空隙。
-
display: block后，vertical-align失效，line-height 不再影响它 - 适用于绝大多数纯展示型图片（如 banner、图标、头像）
- 若需图文混排（如文字环绕图片），则不能简单用 block，需配合其他方案
img {
float: left;
display: block;
}vertical-align: bottom / middle / top 的适用场景
当图片必须保持 inline 或 inline-block（比如和文字同行显示），可通过调整对齐方式压缩空隙。
-
vertical-align: bottom让图片底边与行框底边对齐，空隙最小（但可能仍有一像素） -
vertical-align: middle对齐的是行框中点，对小图更友好；但对大图可能反而加剧错位 - 注意：该属性只对 inline/inline-block 元素生效，
float元素上设置无效
img {
float: left;
vertical-align: bottom; /* 此行实际被忽略 —— 因为 float 后已脱离 inline flow */
}所以真正要用 vertical-align，得先去掉 float，改用 display: inline-block 配合 vertical-align，再用其他方式实现“浮动效果”（如 flex 或 grid）。
立即学习“前端免费学习笔记（深入）”；
line-height: 0 或 font-size: 0 的副作用要警惕
有人会对图片父容器设 line-height: 0 或 font-size: 0 来消灭空隙，这确实有效，但风险明显：
-
font-size: 0会让所有子代文本（包括 span、a 标签里的字）不可见，需逐个重置 -
line-height: 0可能导致行内元素高度塌缩，尤其在响应式或动态内容中难以维护 - 这类 hack 在嵌套较深或 CMS 输出不可控时极易出问题
除非你完全掌控父容器内所有子节点类型，否则不建议优先考虑。
浮动布局本身已属旧模式，但存量项目里仍常见。真正容易被忽略的点是：空隙根源不在浮动，而在 img 的 inline 特性；所以解决问题要回到元素显示类型本质，而不是在 float 上打补丁。
