图片下方多出约3px空白是因默认display:inline，浏览器为其descender预留空间；用display:block或vertical-align:bottom可消除，但需依场景选择。
为什么图片下方总多出约3px空白
这不是 margin、padding 或 bug，而是 <img> 默认为 display: inline 元素，浏览器按文字排版规则处理它：为 descender（如字母 g、y 的下伸部分）预留空间。哪怕父容器里一个字都没有，这个空隙也照常存在；它高度 ≈ line-height × 0.2，所以父容器设了 line-height: 2 或 font-size: 24px，空隙会更明显。
用 display: block 消除最彻底，但得看场景
加 img { display: block; } 能立刻归零空隙，因为它让 <img> 退出行内格式化上下文（IFC），baseline 对齐逻辑直接失效。
- ✅ 适合 banner、轮播图、
<figure></figure>里的主图、flex/grid 容器中的图片——这些本就不该参与文本流 - ❌ 不适合按钮里的图标、
<span></span>内嵌小图、图文混排结构——加了就换行，文字被顶到下一行 - ⚠️ 若父容器已是
display: flex或display: grid，display: block仍生效，但纯属冗余：flex/grid 天然不触发该空隙
vertical-align: bottom 是图文混排的首选解法
想保留 <img> 的 inline 特性，又去掉空隙？vertical-align: bottom 是目前最稳的选择——它让图片底边贴住**行框（line box）底线**，不依赖文字基线，也不破坏水平流。
- ✅ 只需加
img { vertical-align: bottom; }，兼容所有现代浏览器（IE8+） - ✅ 比
vertical-align: middle可靠：middle对齐的是 x-height 中线，换字体或字号就偏移 - ❌ 在
display: flex或display: grid父容器里完全无效——DevTools 会标灰，别白写 - ⚠️ 如果父容器有大
line-height，单靠vertical-align不够，得同步控制父级或设font-size: 0（慎用，会影响子元素继承）
加了 CSS 还有缝？先查这三处
开发者工具里看到“图片下面有空”，大概率不是 CSS 没生效，而是别的东西在撑空间：
- 父容器自带
margin-bottom（尤其是<p></p>标签，它的默认外边距常被忽略） -
<img>标签后存在 HTML 换行或空格，在 inline 场景下会被渲染为约 4px 宽的空白符 - 图片自身导出带透明底或未裁切（Figma/Sketch 导出 PNG 常见），CSS 无法干预，得修图
真正要稳，得先判断这张图是否必须留在文本流里——如果答案是否定的，display: block 就是最干净的选择；如果是，vertical-align: bottom 才是正解。空隙往往藏在父级盒模型或图片源文件里，不是 <img> 自己的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
