display: block 能消除图片底部空隙，因其使 img 退出行内格式化上下文、失效 baseline 对齐；但会强制换行、破坏图文混排，仅适用于独占一行或 flex/grid 容器场景。
display: block 能直接干掉图片底部那几像素空隙，但不是所有场景都适合加——它会让图片彻底退出文本流，换行是必然结果。
为什么 display: block 一加就消失？
因为 img 默认是 inline 元素，浏览器按文字排版规则给它预留 descender 空间（字母 g、y 下伸的部分），哪怕没文字也照留。设成 display: block 后，它不再参与行内格式化上下文（IFC），baseline 对齐逻辑直接失效，空隙归零。
- ✅ 适合 banner、轮播图、网格项这类“图片独占一行”或父容器已是
flex/grid的情况 - ❌ 不适合图标 + 文字按钮、
span内嵌小图——加了就换行，布局当场崩 - ⚠️ 若父容器是
flex或grid，display: block仍生效，但此时其实没必要：flex 容器天然不产生该空隙
加了 display: block 还有缝？先查这三处
开发者工具里看到的“图片下面有空”，大概率不是 CSS 没生效，而是别的东西在撑空间：
- 父元素有
margin-bottom（尤其是p标签自带外边距） -
<img>标签后存在 HTML 换行或空格，被渲染为约 4px 的空白符（仅 inline 场景可见，但加了 block 后这问题本应消失；若仍有缝，说明你可能漏看了父级） - 图片自身导出带透明底或未裁切（如 Figma/Sketch 导出 PNG 常见），CSS 无法干预，得修图
和 vertical-align 比，display: block 的代价是什么
它解决得最彻底，但也最“粗暴”：
- 放弃图文混排能力：一旦设为 block，
img就不能和文字同行对齐了 - 影响行高继承链：如果父容器靠
line-height控制垂直居中，block 后这条链就断了 - 某些旧版 IE 对
img的display: block渲染略有差异，虽已极少遇到，但金融/政企项目仍需留意
真正要稳，别只盯着 img 自己——先确认它是不是必须参与文本流。空隙常藏在父级盒模型里，不是图片的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
