移动端图片下方空隙源于 img 默认 inline 时浏览器预留 descender 空间，非 bug；display: block 可消除但破坏图文混排，vertical-align: bottom 更适配移动端混排场景。
为什么移动端图片下方总有几像素空隙
这不是 bug，是 img 默认为 display: inline 时，浏览器按文本排版规则预留 descender 空间导致的——哪怕页面只有一张图，它也会像字母 g 或 y 那样，在底部留出约 2–4px 的“下伸区”。这个间隙在移动端尤其明显，因为高 DPR 屏幕会放大渲染误差，且常见于 <p></p>、<div> 等默认带 <code>margin-bottom 的容器中。
加 display: block 后还有缝？先查这三处
开发者工具里看到的“图片下面的空白”，大概率不是 CSS 没生效，而是别的东西在撑空间：
- 父容器有
padding-bottom或margin-bottom（尤其是<p></p>标签自带margin） - HTML 源码中
<img>标签后存在换行或空格，触发 inline 元素间约 4px 的空白符渲染 - 图片自身导出带透明底或未裁切留白（如 Figma/Sketch 导出 PNG），CSS 无法干预
移动端调试时建议直接在 DevTools 中展开 Computed 面板，逐层检查 margin、padding 和 line-height 的实际计算值，别一上来就改 img 的样式。
display: block 的适用边界很明确
它能彻底切断基线对齐逻辑，但副作用同样直接：
- ✅ 适合 banner、轮播图、头像、卡片主图等“图片独占一行”或父容器已是
flex/grid的场景 - ❌ 不适合图标+文字按钮、
span内嵌小图、图文混排段落——加了就会强制换行，破坏水平流 - ⚠️ 若父容器是
inline-flex或外层还有文字流，display: block可能引发新的对齐错位
真正要稳，得先确认这张图是否必须参与文本流；否则不如用 vertical-align: bottom 保留 inline 特性。
移动端更推荐 vertical-align: bottom
在保持图文混排能力的前提下，这是最可靠的选择：
-
vertical-align: bottom让图片底边贴住**行框（line box）底边**，不依赖字体度量，兼容性好，视觉上最接近“贴底”直觉 - 它只对
inline或inline-block元素生效，所以别在display: block的图片上写它——那行代码等于没写 - 若父容器设置了大
line-height（比如line-height: 2），空隙会被放大；此时单调img的vertical-align不够，得同步控制父级行高或设font-size: 0
空隙常藏在父级盒模型里，不是图片的问题。真遇到“怎么调都不干净”的情况，优先检查 HTML 结构和图片源文件，而不是堆 CSS hack。
