vertical-align: bottom 是最直接有效的解法，但仅对 inline/inline-block 图片生效；父容器为 flex/grid 时该属性被忽略，空隙天然不存在；display: block 可彻底消除间隙但破坏图文混排。
vertical-align: bottom 是最直接有效的解法，但前提是图片必须是 inline 或 inline-block，且父容器不能是 flex/grid —— 否则这行 CSS 会被 DevTools 标灰、完全不生效。
vertical-align: bottom 为什么常写却没效果
这个属性只对 display: inline 或 display: inline-block 的 <img alt="在CSS中如何解决图片底部默认留白空隙的问题" > 生效。一旦父容器设了 display: flex 或 display: grid，<img alt="在CSS中如何解决图片底部默认留白空隙的问题" > 就变成 flex item / grid item，彻底脱离行内格式化上下文（IFC），vertical-align 直接被忽略。
常见误用场景：
-
div { display: flex; }里给<img alt="在CSS中如何解决图片底部默认留白空隙的问题" >加vertical-align: bottom→ DevTools 会标灰，不起作用 -
<img alt="在CSS中如何解决图片底部默认留白空隙的问题" >是父容器里唯一的行内元素，又没同行文字，vertical-align: middle可能“看起来没变化”，因缺乏对齐参考 -
vertical-align: text-bottom比bottom高 1–2px，可能残留缝隙；middle受字体 x-height 影响，换字体就偏移
display: block 能一劳永逸，但会破坏什么
img { display: block; } 让图片退出行内流，baseline 对齐逻辑彻底失效，空隙立刻归零。但它会让图片独占一行，破坏水平图文混排结构。
立即学习“前端免费学习笔记（深入）”；
适用与不适用场景：
- ✅ 适合
<figure></figure>中的主图、轮播图、banner、或已处于flex/grid容器中的图片（此时加display: block虽冗余但无害） - ❌ 不适合
<button><img alt="在CSS中如何解决图片底部默认留白空隙的问题" >文字</button>这类需图文同行的场景，加了就会强制换行 - ⚠️ 若父容器是
inline-flex且外层还有文字，间隙可能以“行内 flex 容器整体参与基线对齐”的形式重现
加了样式还有缝？先查这三处干扰源
开发者工具里看到“图片下面有空”，90% 不是 vertical-align 或 display 没生效，而是别的东西在撑空间：
- 父容器自带
margin-bottom，尤其是<p></p>标签，默认外边距常被忽略 -
<img alt="在CSS中如何解决图片底部默认留白空隙的问题" >标签后存在 HTML 换行或空格，在 inline 场景下会被渲染为约 4px 宽的文本节点（Figma/Sketch 导出 HTML 时特别常见） - 父容器设置了大
line-height（如line-height: 2），空隙高度 ≈ 0.2 ×line-height；此时单调调<img alt="在CSS中如何解决图片底部默认留白空隙的问题" >的样式没用，得同步控制父级行高，或临时加font-size: 0（但需重置子文字字号）
真正容易被忽略的点
空隙不是 bug，是行内排版规则的副产品；要不要动 vertical-align，取决于图片是否必须和文字同行显示。如果父容器已经是 flex 或 grid，那根本不用管这个空隙——它天然不存在，强行加 vertical-align 只会让代码变脏。另外，图片自身导出带透明底或未裁切（Figma/Sketch 导出 PNG 常见），CSS 无法干预，得回设计稿里重导图。
