图片浮动时下方出现间隙的本质是其作为行内元素默认对齐基线。解决方法有三：一是设 display: block; 使其变为块级元素；二是用 vertical-align: top/middle/bottom 调整对齐方式；三是检查并调整父容器 line-height 或 font-size。
图片在浮动时下方出现间隙，本质是图片作为行内元素，默认对齐基线（baseline），与文字底部留有空间。解决方法很简单，两个最常用且有效的方案：
让图片脱离行内布局流，自然消除基线对齐带来的间隙：
img { display: block; float: left; }
如果图片需保持行内特性（比如图文混排），可改用 vertical-align 控制对齐基准：
vertical-align: top;、middle; 或 bottom;
bottom 能对齐到父容器底线，通常比默认 baseline 更贴近预期有时间隙看似来自图片，实则是父容器设置了较大的 line-height，撑高了行框高度：
立即学习“前端免费学习笔记（深入）”；
line-height: 0; 或 font-size: 0; 可快速验证是否为此原因基本上就这些。display: block 最省心，vertical-align 更灵活——按需选一个就行。
以上就是css浮动图片下方出现间隙怎么办_利用vertical-align或把图片设为display:block去除默认间隙的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
542
收藏
