图片默认按baseline对齐导致底部留白，应优先用vertical-align: bottom；flex容器中需用align-items: flex-end；单图可设display: block配合margin-top: auto或绝对定位。
图片在行内元素中默认对齐 baseline 是啥问题
HTML 中 <img> 默认是 inline 元素，浏览器会按文字基线（baseline）对齐——也就是图片底边和文字的字母 x 底部对齐，不是和父容器底边对齐。所以你看到图片下面总有一小段空白，其实是留给 descender（比如字母 g、j 的下延部分）的留白空间。
常见错误现象：<img src="a.png"> 文字 左右不对齐、图片下方有看不见的间隙、用 margin-bottom: -4px 临时压下去但换字体就失效。
实操建议：
- 优先用
vertical-align: bottom，它让图片底边直接贴住行框（line box）底部，不依赖文字基线 - 避免用
vertical-align: middle，它对齐的是整个行高的中点，不是父容器中点，容易飘 - 如果父容器是 flex 布局，
vertical-align不生效，得换思路
flex 容器里图片底部对齐怎么写才稳
当图片放在 display: flex 的容器中时，vertical-align 完全无效，因为它是为 inline 场景设计的。这时候得靠 flex 自身的对齐能力。
使用场景：导航栏图标+文字、卡片底部操作按钮组、响应式图文字块。
实操建议：
- 给图片父容器加
display: flex和align-items: flex-end，图片自动沉到底部 - 如果图片和文字在同一行且需左右分布，用
justify-content: space-between配合align-items: flex-end - 注意：若父容器高度未显式设定，
flex-end可能没效果，建议设个min-height或height
vertical-align 的取值差异和兼容性坑
vertical-align 看似简单，但不同值的行为逻辑完全不同，而且 IE8+ 才支持 text-bottom 这类值。
参数差异：
-
bottom：对齐行框底部（最常用、最可控） -
text-bottom：对齐父元素字体的 text-bottom（受 font-size 和 font-family 影响，不稳定） -
baseline：默认值，也是问题源头 -
top/middle：常被误以为“居中”，其实都基于行高计算，非容器中心
性能/兼容性影响：所有值都不触发重排，纯渲染层调整；但 vertical-align 在 table-cell 中行为不同，别混用。
更干净的替代方案：用 display: block + margin-auto
如果你只是想让单张图片在块级容器里底部对齐，绕开 inline 对齐逻辑反而更可靠。
实操建议：
- 给
<img>加display: block，它就脱离行内流了 - 再用
margin-top: auto（配合父容器display: flex; flex-direction: column）或绝对定位position: absolute; bottom: 0 - 注意：绝对定位需父容器
position: relative，且可能脱离文档流影响后续布局
真正容易被忽略的是：很多“图片底部对齐”需求其实隐含了“文字也要跟着对齐”的上下文。这时候单独调图片没用，得统一控制图文容器的对齐方式——不是修图，是修盒子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
