17370845950

图片浮动时下方出现间隙的本质是其作为行内元素默认对齐基线。解决方法有三：一是设 display: block; 使其变为块级元素；二是用 vertical-align: top/middle/bottom 调整对齐方式；三是检查并调整父容器 line-height 或 font-size。

图片在浮动时下方出现间隙，本质是图片作为行内元素，默认对齐基线（baseline），与文字底部留有空间。解决方法很简单，两个最常用且有效的方案：

设置图片为块级元素

让图片脱离行内布局流，自然消除基线对齐带来的间隙：

• 给图片加 display: block;，这是最直接、兼容性最好的方式
• 适用于大多数浮动图片场景，尤其当图片不需要与文字混排时
• 代码示例：img { display: block; float: left; }

调整垂直对齐方式

如果图片需保持行内特性（比如图文混排），可改用 vertical-align 控制对齐基准：

• 常用值：vertical-align: top;、middle; 或 bottom;
• bottom 能对齐到父容器底线，通常比默认 baseline 更贴近预期
• 注意：该属性只对行内元素和表格单元格生效，需确保图片没被设成 block

顺带检查父容器 line-height

有时间隙看似来自图片，实则是父容器设置了较大的 line-height，撑高了行框高度：

• 给图片父元素设 line-height: 0; 或 font-size: 0; 可快速验证是否为此原因
• 若确认是此问题，建议优先调低 line-height，而非强行 hack 图片

基本上就这些。display: block 最省心，vertical-align 更灵活——按需选一个就行。