图片下方空白源于img默认inline导致的基线对齐display:block最直接有效vertical-align:middle等有兼容性与场景限制font-size:0或line-height:0副作用大。图片下方空白是行内元素的基线对齐导致的默认情况下 img 是行内元素display: inline浏览器会按文本基线baseline对齐它留出下降部descender空间——这就是图片下方那几像素空白的来源。不是 margin、padding 或 border改了也没用。哪怕把 margin、padding 全设为 0空白还在vertical-align 默认值是 baseline这是罪魁祸首父容器字体大小font-size越大空白越明显display:block 是最直接有效的解法把 img 设为块级元素彻底脱离行内布局上下文基线对齐失效空白自然消失。适用所有现代浏览器包括 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虽能压掉空白但副作用太强前者会让子元素字体继承异常后者影响行高计算尤其在图文混排时极易翻车。 RedClaw 百度推出的手机端万能AI Agent助手