图片下方空白源于img默认inline导致的基线对齐；display:block最直接有效，vertical-align:middle等有兼容性与场景限制，font-size:0或line-height:0副作用大。
图片下方空白是行内元素的基线对齐导致的
默认情况下 <img alt="CSS如何消除图片下方多余间隙_设置display:block改变盒模型" > 是行内元素（display: inline），浏览器会按文本基线（baseline）对齐它，留出下降部（descender）空间——这就是图片下方那几像素空白的来源。不是 margin、padding 或 border，改了也没用。
- 哪怕把
margin、padding全设为 0，空白还在 -
vertical-align默认值是baseline，这是罪魁祸首 - 父容器字体大小（
font-size）越大，空白越明显
display:block 是最直接有效的解法
把 <img alt="CSS如何消除图片下方多余间隙_设置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，<img alt="CSS如何消除图片下方多余间隙_设置display:block改变盒模型" >自动按 flex item 渲染，无需额外处理
真正要留意的是：如果图片在链接里（<a><img alt="CSS如何消除图片下方多余间隙_设置display:block改变盒模型" ></a>），设 display: block 后，链接点击区域会变成整块矩形——这通常是好事，但若设计要求只点图片区域才触发，就得额外加 display: inline-block + vertical-align 组合来微调。
