vertical-align: bottom 对 inline 元素生效但对齐的是行框底边而非父容器底边；最稳解法是同时设 display: inline-block、vertical-align: bottom 和父容器 line-height: normal；flex 布局下应改用 align-items: flex-end。

为什么 vertical-align: bottom 加了没反应

因为价格标签（比如 <span class="price">¥99</span>）和原价文字（比如 <span class="original">¥129</span>）默认是 inline 元素，vertical-align: bottom 确实生效——但它对齐的是“行框底边”（line box bottom），不是父容器的底边。而行框高度受 font-size、line-height 和周围换行/空格影响，导致视觉上总差那么几像素。

最稳解法：用 display: inline-block + 显式 vertical-align: bottom

必须同时满足三个条件，缺一不可：

• 给价格标签和原价文字都加 display: inline-block（不能只加一个）
• 两者都设 vertical-align: bottom
• 父容器（如 <div class="price-row">）设 <code>line-height: normal 或明确值（如 line-height: 1.2），避免继承放大行高

  示例代码：

  .price-row {
    line-height: normal;
  }
  .price-row .price,
  .price-row .original {
    display: inline-block;
    vertical-align: bottom;
  }
  

  如果父容器是 flex 布局，别碰 vertical-align

  在 display: flex 容器里，vertical-align 完全无效。此时该用 align-items: flex-end 让所有子项（包括价格和原价）统一贴底：

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 确保价格和原价是 flex 的直接子元素（不要被额外 <span></span> 或 <div> 包裹） <li>父容器加 <code>display: flex 和 align-items: flex-end
  • 若需水平间距，用 gap；若要兼容旧浏览器，改用 margin-right 作用于前一个元素

  注意：align-items: flex-end 对齐的是交叉轴末端，在 flex-direction: row（默认）下就是底部；如果父容器设了 min-height 但没设 height，它仍会按内容高度对齐，不是按容器底边——这是最容易忽略的点。

  绝对定位虽准，但代价高

  真要像素级贴死父容器底边，可用 position: absolute; bottom: 0;，但：

  • 必须把父容器设为 position: relative
  • 价格和原价都会脱离文档流，后续兄弟元素会“看不见”它们的高度
  • 响应式时需额外处理 left/right 偏移，不如前两种方案鲁棒

  除非父容器高度固定且布局极其简单，否则不建议走这条路。