图片下方空白源于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="max-width:90%"> </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 上反复调参。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
