当卡片内段落文字长度不一时，图标常因高度差异而错位；通过为每张卡片设置统一的底边距（如 margin-bottom: 20px），可强制所有卡片在垂直方向上保持一致的底部基准线，从而实现图标视觉对齐。
当卡片内段落文字长度不一时，图标常因高度差异而错位；通过为每张卡片设置统一的底边距（如 `margin-bottom: 20px`），可强制所有卡片在垂直方向上保持一致的底部基准线，从而实现图标视觉对齐。
在响应式卡片布局中，图标位置不稳定是一个常见问题——尤其当卡片标题或描述文本行数变化时，卡片整体高度随之浮动，导致底部图标（如“查看详情”箭头、功能图标等）无法对齐。许多开发者尝试使用 position: absolute 配合 position: relative 父容器来“钉住”图标，但往往因子元素高度不可控、定位上下文混乱而失效。
更简洁、健壮的解决方案是放弃绝对定位，转而控制卡片容器的垂直对齐基准：
✅ 推荐做法：为每个卡片元素统一设置 margin-bottom，并结合 display: flex 与 align-items: flex-end（或 justify-content: flex-end）精准控制图标位置。
.card {
margin-bottom: 20px; /* 统一底部留白，建立稳定基准线 */
display: flex;
flex-direction: column;
height: 100%; /* 配合父容器高度约束，避免高度塌陷 */
}
.card-icon {
margin-top: auto; /* 将图标自动推至容器底部 */
align-self: flex-end;
}
⚠️ 注意事项：
- 避免仅依赖 position: absolute + bottom: 0，除非卡片高度固定且父容器明确设为 position: relative；
- 若卡片采用 CSS Grid 布局，可直接用 align-items: end 或 justify-items: end 控制图标对齐；
- margin-bottom 的值需根据设计稿间距规范设定，建议使用 CSS 自定义属性（如 --card-spacing: 1.25rem）提升可维护性；
- 在 Flex 布局中，margin-top: auto 是实现“底部吸附”的关键技巧，比绝对定位更语义化、更易响应。
总结：图标错位本质是卡片高度不一致导致的视觉基准偏移。与其强行用定位“修补”，不如通过弹性布局建立稳定的内部对齐逻辑——既兼容多行文本，又无需 JavaScript 计算，真正实现干净、可扩展的 UI 一致性。
