图片下方空白源于img默认inline导致的基线对齐；display:block最直接有效，vertical-align:middle等有兼容性与场景限制，font-size:0或line-height:0副作用大。
图片下方空白是行内元素的基线对齐导致的
默认情况下 display: inline），浏览器会按文本基线（baseline）对齐它，留出下降部（descender）空间——这就是图片下方那几像素空白的来源。不是 margin、padding 或 border，改了也没用。
- 哪怕把
margin、padding全设为 0，空白还在 -
vertical-align默认值是baseline，这是罪魁祸首 - 父容器字体大小（
font-size）越大，空白越明显
display:block 是最直接有效的解法
把
- 适用所有现代浏览器，包括 IE8+
- 不影响图片本身渲染，只改变其盒模型参与方式
- 如果图片需要和其他文字同行显示（比如图标+文字），就不能用这个方案
img {
display: block;
}
vertical-align: middle 也能解决但有陷阱
不改盒模型，只调对齐方式，看似轻量，但实际依赖父容器的 line-height 和字体设置，容易在嵌套或响应式场景下失效。
-
vertical-align: top、bottom、middle都能消除空白，但middle并非绝对居中，而是相对于父元素 x-height 对齐 - 若父容器
line-height很大，vertical-align: middle可能让图片上移过多 - 在 flex 或 grid 容器里，
vertical-align根本不生效
其他常见误操作和替代方案
有人试过 font-size: 0 或 line-height: 0，虽能压掉空白，但副作用太强：前者会让子元素字体继承异常，后者影响行高计算，尤其在图文混排时极易翻车。
-
font-size: 0在父容器上设，子元素必须显式重置font-size，否则文字不可见 -
line-height: 0会让所有行内内容挤压，破坏可读性 - 用
flex布局时，直接给父容器设display: flex，
真正要留意的是：如果图片在链接里（display: block 后，链接点击区域会变成整块矩形——这通常是好事，但若设计要求只点图片区域才触发，就得额外加 display: inline-block + vertical-align 组合来微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
