display:block是最简解法，因img默认inline且vertical-align:baseline需预留descender空间；图文混排时应改用vertical-align:bottom，避免换行。
直接加 display: block 最快，但得先确认图片是否需要和文字同行——不是所有场景都能这么干。
为什么 img 底部总有 3–5px 空白
因为 <img> 默认是 display: inline，浏览器把它当文字处理：预留 descender 空间（给字母 g、y 下伸部分），哪怕父容器里一个字都没有，这空间也照留。你看到的“缝隙”，其实是行框（line box）的基线（baseline）和容器底边之间的距离，受 font-size 和 line-height 隐式影响。
display: block 是最干净的解法，但有硬限制
它让 <img> 彻底退出行内格式化上下文（IFC），baseline 对齐逻辑失效，空隙归零。
- ✅ 适合 banner、轮播图、
<figure>里的主图、flex/grid 容器中的独立图片 - ❌ 不适合按钮图标、
<span>内嵌小图、图文混排结构——加了就换行，文字被顶到下一行 - ⚠️ 若父容器已是
display: flex或display: grid，display: block仍生效，但纯属冗余：这些布局天然不触发 baseline 空隙
vertical-align: bottom 能保留 inline 行为
如果图片必须和文字同行（比如带图标的导航项），就别动 display，改对齐方式：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: bottom把图片底边直接贴到行框底边，最常用也最稳 -
vertical-align: middle或top也可用，但效果依赖父级line-height，容易在响应式中偏移 - 注意：这个属性只对
inline、inline-block、table-cell元素有效，block后无效
还有缝？别只盯着 img 标签
开发者工具里看到“图片下面有空”，大概率不是 img 自己的问题：
- 父元素有
margin-bottom（尤其<p>标签自带外边距） -
<img>标签后存在 HTML 换行或空格，在 inline 场景下会被渲染成约 4px 的空白符 - 图片导出带透明底或未裁切（Figma/Sketch 常见），CSS 无能为力，得回设计稿里修图
真要快速定位，打开 DevTools 的 Computed 面板，逐层看 margin、padding、line-height 实际值，比反复试 vertical-align 更省时间。
