vertical-align: bottom仅对inline/inline-block元素在非flex/grid父容器中有效；失效主因是父容器为flex/grid时该属性被忽略，稳定方案是flex布局配合align-items: flex-end。
直接用 vertical-align: bottom 很可能没效果——它只在 inline 或 inline-block 场景下起作用，且受父容器布局类型严格限制；真正稳定可控的方案是 flex 布局 + align-items: flex-end。
为什么 vertical-align: bottom 有时失效？
这个属性常被误认为“让元素底边对齐”，其实它只影响行内级（inline/inline-block）元素在行框（line box）内的对齐位置。一旦父容器设了 display: flex 或 display: grid，vertical-align 就完全被忽略——浏览器根本不会计算行框。
- 常见错误：给
<div>设display: flex，里面放多个<img>，再给<img>加vertical-align: bottom→ 无效 - 另一个坑：图片是 inline 元素，但父级用了
text-align: center，你以为居中了，其实只是文本对齐，垂直方向仍按 baseline 对齐 - 兼容性没问题，但逻辑前提错了——不是属性不好用，而是用错了上下文
flex 布局下底部对齐的正确写法
当多张高度不同的图需要严格底边对齐（比如产品图+文字说明组合），flex 是目前最可靠、语义最清晰的方案。
- 容器设
display: flex和align-items: flex-end，所有子项（包括<img>）自动按底边对齐 - 如果图带
<figcaption>，建议把每张图和标题包进一个<figure>，再让<figure>作为 flex 子项，避免图片单独对齐后标题错位 - 注意：不要同时设
justify-content: center和align-items: flex-end后又给图片加margin，容易引发意外偏移
.gallery {
display: flex;
align-items: flex-end;
gap: 12px;
}
.gallery figure {
margin: 0;
}
.gallery img {
display: block; /* 防止 inline 默认间隙 */
max-width: 100%;
height: auto;
}inline-block 场景下 vertical-align 的实操要点
如果你必须保留 inline-block（比如旧项目不能改结构），那 vertical-align 还能用，但得满足三个条件：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 父容器不能是 flex/grid，推荐用
font-size: 0消除换行空白，再给子项单独设字体大小 -
<img>必须显式设vertical-align: bottom（默认是baseline，会和文字基线对齐，留出降部空间） - 如果图旁有文字，文字也要同步设
vertical-align: bottom，否则图文之间仍有错位
示例：<div style="font-size: 0"><img src="a.jpg" style="vertical-align: bottom"><span style="vertical-align: bottom; font-size: 14px">描述</span></div>
容易被忽略的细节：图片加载前的高度抖动
多图并排时，如果没设宽高或 aspect-ratio，图片加载瞬间会从 0 高度撑开，导致底部对齐短暂失效——用户看到的是“先乱后齐”。
- 解决方法：给
<img>加aspect-ratio: 4 / 3（按实际比例调整），或用height: 0; padding-bottom: 75%的 hack 方式占位 - 别依赖
object-fit来“修”对齐——它只控制内容裁剪，不改变盒模型尺寸 - 如果图来自 CMS 或用户上传，尺寸不可控，优先用 flex +
min-height+overflow: hidden控制容器底线
