position: absolute + padding-bottom不是等高布局的可靠解法，因其使元素脱离文档流导致父容器高度塌陷、各子项实际高度不一致，且响应式下易错乱；真正可行的是在flex或grid等高容器中使用margin-top: auto或align-self: end。
为什么position: absolute + padding-bottom不是等高布局的可靠解法
它根本不能实现真正的等高布局，只是视觉上“假装对齐”。父容器高度仍由内容撑开，各子项实际高度不一致，absolute元素脱离文档流后，其他兄弟元素会忽略它的存在，导致父容器高度塌陷或错位。常见错误现象是：底部看似对齐了，但容器高度忽高忽低、响应式时错乱、Flex/Grid 布局下失效。
真正可行的底部对齐必须依赖容器“已知等高”这个前提
只有当所有子项父容器本身已是等高（比如用 display: flex 或 display: grid 控制），才能进一步让内部元素底部对齐。此时margin-top: auto或align-self: flex-end才是正解。
-
flex容器中：给目标元素加margin-top: auto，比position: absolute更稳定，且自动适配动态内容高度 -
grid容器中：用align-self: end或在行轨道上设justify-items: end - 若强行用
absolute，必须配合top: auto; bottom: 0，且父容器需设position: relative和**固定/预设高度**——这在内容不可控的场景里等于放弃响应式
padding-bottom留白本质是“预留空间”，不是对齐机制
它只适用于内容高度完全可预测的静态模块（如卡片高度统一为 200px，底部按钮距底始终 24px）。一旦文字换行、图片尺寸变化或字体缩放，padding-bottom就失去意义。更危险的是：它会让点击区域变大，可能遮挡下方元素，且无障碍阅读器无法感知这种“视觉对齐”。
- 不要用
padding-bottom替代margin或布局逻辑 - 如果真要留白，优先用
gap（Flex/Grid）或margin-bottom配合align-self - 响应式断点中，
padding-bottom值需随容器高度重设，维护成本远高于 Flex 对齐
实际项目中该选哪条路
现代浏览器下，95% 的等高+底部对齐需求，直接用 display: flex 最省心：
立即学习“前端免费学习笔记（深入）”；
.card-list {
display: flex;
}
.card {
display: flex;
flex-direction: column;
height: 200px; /* 或 min-height */
}
.card-footer {
margin-top: auto; /* 推到底部 */
}如果兼容 IE10–11，可用 display: table-cell + vertical-align: bottom，但注意表格布局对响应式的限制。而 absolute + padding 组合，只建议用于极简 banner 图文模块，且内容长度严格受控。
真正难的不是怎么写那几行 CSS，而是判断当前场景是否真的需要“绝对底部对齐”——很多时候，设计稿里的对齐，其实只需要一致的内边距或弹性留白就够了。
