图片底部空白源于img默认inline特性导致的基线对齐预留空间；display:block可彻底解决但破坏图文混排；推荐vertical-align:bottom等替代方案；残留空隙多因父容器边距或图片自身透明空白。
图片底部空白是怎么来的
不是图片本身有空隙，是 <img> 默认为行内元素（display: inline），会像文字一样对齐基线（baseline），下方预留出字母 g、y、p 的下伸部分空间——哪怕图片没文字，浏览器也照留。这就导致父容器里图片底下总有一小条白边。
display:block 能不能直接解决
能，但得看场景。给 <img> 加 display: block 是最干脆的解法，它让图片脱离文本流，不再参与基线对齐，底部空白立刻消失。
- 适用：图片单独占一行，或你不需要它和文字混排
- 不适用：图片要和文字并排（比如图标+文字按钮），加了
display: block会换行，破坏布局 - 注意：如果父容器设置了
font-size: 0或line-height极小，也可能影响表现，但这是次要因素
不想用 display:block 怎么办
有三个更灵活的替代方案，按推荐顺序：
-
vertical-align: bottom—— 让图片底边贴住父容器底线，不依赖基线，保留行内特性，适合图文混排 -
vertical-align: middle—— 对齐中线，视觉上也常能“盖住”空隙，但不如bottom稳定 -
font-size: 0在父容器上 —— 消除行高带来的间隙根源，但要注意子元素需重设font-size，否则文字会消失
为什么有时候加了 display:block 还有空隙
常见原因就两个：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
padding-bottom或margin-bottom，误以为是图片空隙 - 图片被包裹在
<p>、<div>等默认带margin的标签里，实际是段落/盒子的外边距 - 极少数情况：图片格式含透明底或导出时自带空白（比如 Sketch 导出 PNG 未裁切），这时 CSS 无效，得修图
遇到“加了 display: block 还有缝”，先打开开发者工具，逐层检查 computed styles 和盒模型，别急着调 CSS
