浮动图片下方空白是因img作为inline元素在IFC中按基线对齐，预留降部空间所致；设display:block可彻底解决，使其脱离基线对齐逻辑。
浮动图片下方多出空白是怎么回事
这是行内格式化上下文（IFC）里基线对齐惹的祸。img 默认是 inline 元素，浏览器会把它和文字一样按基线（baseline）对齐，而基线以下预留了放字母“g”“j”等降部的空间——哪怕周围没文字，这个间隙也照留不误。
常见错误现象：<img src="a.jpg" style="max-width:90%" alt="CSS浮动与图片的底边间隙问题_如何精准对齐浮动图" > 后紧接段落，图片底边和文字顶边之间明显有 3–5px 空白；用 border 或 background 一测，发现图片容器本身没撑满，空隙在图片盒模型外部。
- 不是 margin 或 padding，清掉也没用
- 不是父容器高度塌陷导致的——那是另一个问题
- 只在
float+inline图片组合时高频出现，display: block能直接破局
用 display: block 最快解决对齐问题
把图片变成块级元素，就彻底脱离 IFC 的基线对齐逻辑，自然不再预留降部空间。这是最轻量、兼容性最好（IE6+ 都支持）、副作用最小的解法。
使用场景：图文混排中仅需左/右浮动图片，不要求图片参与文字环绕对齐（比如新闻配图、侧边图标）。
立即学习“前端免费学习笔记（深入）”；
-
img { display: block; float: left; }—— 一行搞定，无须动 HTML 结构 - 如果必须保留某些图片为 inline（如图标内联在句子里），就单独加 class 控制，别全局重置
img - 注意：设成
block后，vertical-align失效，但本来浮动下它也不起作用
vertical-align: bottom 不总管用的原因
有人试过给浮动图片加 vertical-align: bottom，发现有时有效、有时无效——根本原因是：当元素设置了 float，vertical-align 属性**被忽略**。CSS 规范明确写了，该属性只对 inline、table-cell 和 inline-block 生效，float 元素不在其列。
容易踩的坑：
- 在浮动图片上写
vertical-align: bottom，开发者工具里能看到样式，但实际不生效 - 误以为是浏览器 bug，其实是规范行为
- 若同时用了
display: inline-block和float，优先级以float为准，inline-block的对齐能力也被废掉
line-height 和 font-size 影响间隙大小
那个空白的高度，其实等于当前行高减去图片内容高度再减去基线偏移，而行高由父容器的 line-height 和 font-size 共同决定。所以同一张图，在不同字号或行高环境下，底部空隙会变大或缩小。
性能与兼容性提示：
- 改
line-height: 0或font-size: 0在父容器上能压掉间隙，但会破坏内部文字渲染，慎用 - IE8 及更早版本对
line-height计算有偏差，间隙可能比现代浏览器更大 - 如果父容器是
font-size: 14px; line-height: 1.5，那默认间隙≈7px；换成line-height: 1，间隙基本消失，但前提是图片没设float或已转为block
真正要控制精准对齐，别靠调文字相关属性去“挤”，直接让图片退出行内流——display: block 是最干净的出口。其他方案要么治标不治本，要么埋下后续维护雷。
