图片底部空白间隙源于img默认inline时浏览器预留descender空间，非bug；可用vertical-align: bottom（需确保父容器非flex/grid）或display: block（会破坏图文混排）解决，但须先排查父级margin、html空白符及图片导出问题。
图片底部多出的空白间隙不是 bug，也不是你漏写了 margin 或 padding，而是 <img> 默认为 display: inline，浏览器按文字排版规则为其预留 descender 空间（给字母 g、y 的下伸部分）导致的。直接加 vertical-align: bottom 或 display: block 能解决，但选哪个、怎么用，得看场景。
vertical-align: bottom 为什么常写却没效果？
这个属性只对 display: inline 或 display: inline-block 的 <img> 生效，且它的父容器不能是 display: flex 或 display: grid——这两种布局会让 <img> 变成 flex item / grid item，彻底脱离行内格式化上下文（IFC），vertical-align 直接被忽略。
- 常见误用：
div { display: flex; }里给img加vertical-align: bottom→ DevTools 会标灰，不起作用 - 如果
img是父容器里唯一的行内元素，vertical-align: middle可能“看起来没变化”，因缺乏对齐参考 -
vertical-align: text-bottom比bottom略高一点，适合图文混排时与文字更协调；middle受字体 x-height 影响，换字体就偏移，不推荐用于精确控制
display: block 能一劳永逸，但会破坏什么？
img { display: block; } 让图片退出行内流，baseline 对齐逻辑失效，空隙立刻归零。但它会让图片独占一行，破坏水平图文混排结构。
- ✅ 适合 banner、轮播图、
figure主图、flex/grid容器中的图片——这些本就不该参与文本流 - ❌ 不适合按钮图标 + 文字、
<p></p>内嵌小图、图文并排段落——加了就换行，文字被挤到下一行 - ⚠️ 若父容器已是
display: flex或display: grid，display: block仍生效，但纯属冗余：flex/grid 天然不触发该空隙
加了样式还有缝？先查这三处干扰源
开发者工具里看到“图片下面有空”，90% 不是 vertical-align 或 display 没生效，而是别的东西在撑空间：
- 父容器自带
margin-bottom，尤其是<p></p>标签，默认外边距常被忽略 -
<img>标签后存在 HTML 换行或空格，在 inline 场景下会被渲染为约 4px 宽的空白符 - 图片自身导出带透明底或未裁切（Figma/Sketch 导出 PNG 常见），CSS 无法干预，得重导图
- 父容器
line-height过大（如line-height: 2），空隙高度 ≈ 0.2 ×line-height；此时单调调img的样式没用，得同步控制父级行高，或临时设font-size: 0（但需重置子文字字号）
真正容易被忽略的是：空隙看起来在图片下面，实际可能来自外层 <p></p> 的 margin，或者 HTML 换行产生的空白字符。调试时优先展开 DevTools 的 Computed 面板，逐层检查父级的 margin、padding 和 line-height 实际值，比反复调 img 的样式更快定位真因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
