图片下方空白源于img默认inline导致的基线对齐，预留descender空间；最直接解法是display:block，彻底脱离行内布局；图文混排时可用vertical-align:bottom或top替代。

图片默认基线对齐，导致底部留白——这不是图片本身的问题，而是 <img> 默认是 inline 元素，会和文字一样参与行内布局，受 baseline 对齐规则影响。

为什么图片下面总有空白？

这是最常被忽略的渲染机制：浏览器把 <img> 当作文本字符处理，其底部默认对齐到父容器中“基线（baseline）”，而基线在字体下方还留有一段空间（供字母如 g、y 的下伸部分使用），所以图片下方出现空白。

• 该空白不是 margin 或 padding，无法用 margin-bottom: 0 直接清除
• 父容器若无其他文本，空白依然存在（因为行框仍按字体度量生成）
• vertical-align: baseline 是默认值，显式写出来也一样

让图片真正贴底的三种可靠方式

核心思路是切断图片与文本行框的基线关联。以下方法按兼容性和语义推荐排序：

• 设为块级：display: block —— 最简单彻底，适合独立图片（如 banner、icon）
• 调整对齐方式：vertical-align: bottom 或 vertical-align: top —— 保留 inline 特性，适合图文混排场景
• 重置行高：line-height: 0 在父容器上 —— 治标不治本，可能影响内部其他文本，慎用

示例（推荐第一种）：

立即学习“前端免费学习笔记（深入）”；

<div>
  <img src="logo.png" style="display: block;">
</div>

flex 布局中图片底部对齐怎么写？

当父容器是 display: flex 时，vertical-align 失效，需改用 flex 自身对齐属性：

• 让图片自身“底部对齐”父容器：给图片加 align-self: flex-end
• 让所有子项底部对齐：给父容器设 align-items: flex-end
• 注意：若父容器高度未固定，flex-end 可能看起来没变化，需确认父容器有明确高度或最小高度

常见误操作：justify-content: flex-end 是水平方向，对底部无效。

移动端或响应式中容易翻车的点

图片底部对齐在缩放、字体加载、动态插入内容时可能复现空白：

• WebFont 加载完成前，浏览器用后备字体度量行框，font 加载后重新计算，可能闪现空白 → 建议用 display: block 规避
• 使用 object-fit 的图片（如 object-fit: cover）仍受 inline 行框影响，必须同步处理对齐
• 某些 UI 框架（如 Bootstrap）的 .img-fluid 类不重置 display，需额外覆盖

真正稳的解法，往往就是一行 display: block，而不是在 vertical-align 上反复调参。