vertical-align: bottom 是最稳妥的解法，90% 场景下直接生效且不破坏图文混排；它让 img 底边贴住行框底边，绕过 baseline 对齐逻辑，空隙归零，同时保留 inline 行为。
vertical-align: bottom 是最稳妥的解法，90% 场景下直接生效且不破坏图文混排；display: block 虽快但会强制换行，别在按钮图标里乱加。
为什么图片底下总有 3px（其实是 2–5px）空隙
这不是 margin 或 padding，是浏览器把 <img> 当文字处理的结果：<img> 默认 display: inline 且 vertical-align: baseline，行框（line box）必须为字母 g/y 的 descender 预留空间。哪怕父容器空无一物，这个空隙也存在——它随 font-size 和 line-height 变化，14px 字号时常见 ≈3px。
DevTools 里看到“图片下面有缝”，先别调 vertical-align：优先检查以下三点：
-
<p></p>标签自带margin-bottom，不是图片的问题 -
<img>标签后有 HTML 换行或空格，被渲染成约 4px 宽的文本节点 - 图片导出带透明底或画布留白（Figma/Sketch 常见），CSS 修不了
vertical-align: bottom 为什么最常用
它让 <img> 底边直接贴住行框底边，绕过 baseline 对齐逻辑，空隙归零，同时保留 inline 行为——这对按钮图标、导航项这类图文混排结构至关重要。
注意：vertical-align 只对 inline、inline-block、table-cell 元素有效；设成 display: block 后它就失效了。
-
vertical-align: middle不推荐单独用：依赖 x-height，换字体/字号就偏移 -
vertical-align: text-bottom对齐文字内容区底部，比bottom高 1–2px，可能残留缝隙 - 若父容器设了大
line-height（如line-height: 2），单改img的vertical-align无效，得同步控制父级行高，或临时加font-size: 0
display: block 是彻底但有代价的方案
img { display: block; } 让图片退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效，空隙立刻消失——但它会强制换行，破坏所有需要和文字同行的结构。
- ✅ 适合 banner、轮播图、
<figure></figure>里的主图、flex/grid容器中的独立图片 - ❌ 不适合
<button><img>文字</button>这类内嵌小图场景，加了就断行 - ⚠️ 若父容器已是
display: flex或display: grid，display: block仍生效但纯属冗余：这些布局天然不触发 baseline 空隙
真有缝？别只盯着 img 标签
开发者工具里看到“图片下面有空”，大概率不是 <img> 自己的问题：
- 父元素有
margin-bottom（尤其<p></p>自带外边距） -
<img>标签后存在 HTML 换行或空格，在 inline 场景下会被渲染成约 4px 的空白符 - 图片导出带透明底或未裁切，CSS 无能为力，得回设计稿里修图
真正容易被忽略的是父级盒模型干扰源。打开 DevTools 的 Computed 面板，逐层看 margin、padding、line-height 实际值，比反复试 vertical-align 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
