vertical-align: bottom 仅对 td、th 或 display: table-cell 元素生效，直接用于 div 或 p 等块级元素无效；需配合固定 height 或 padding 才能显效，且不适用于多行溢出场景。
vertical-align: bottom 在 <td> 或 <code><th> 上才有效
<p>直接给 <code><table> 或 <code><tr> 设 <code>vertical-align: bottom 没用，它只对单元格级元素（<td>、<code><th>）或 <code>display: table-cell 元素生效。浏览器会忽略加在非单元格元素上的该声明。
常见错误是把样式写成：tr { vertical-align: bottom; } —— 这不会让内容贴底，必须作用于单元格本身。
- 正确写法：
td, th { vertical-align: bottom; } - 若只针对某列，用类选择器：
.bottom-col { vertical-align: bottom; } - 内联写法也行：
<td style="vertical-align: bottom">内容</td>，但不推荐用于多处
配合 height 或 padding 才能看出效果
vertical-align: bottom 是相对“行框（line box）底部”对齐，而默认表格行高由内容撑开，没有显式高度时，底部对齐几乎不可见——因为内容本来就在底部。
要让效果明显，得人为制造“留白空间”：
立即学习“前端免费学习笔记（深入）”；
- 给
td设置固定高度：height: 60px;，再配vertical-align: bottom; - 或用
padding-bottom拉开内容与单元格底边距离，再靠vertical-align: bottom把内容拉回底部 - 避免同时设
line-height过大，否则可能干扰对齐基准（尤其多行文本）
表格中 vertical-align 的行为和 inline 元素不同
在 <td> 里，<code>vertical-align 控制的是“单元格内容”的对齐位置；而在普通 inline 元素上，它控制的是“该元素自身在行框中的位置”。这是关键区别。
这意味着：
- 即使单元格里嵌了
<div> 或 <code><p></p>这类块级元素，只要没改display，vertical-align: bottom仍会让整个块贴着单元格底部对齐（不是块内部文字贴底） - 如果单元格内有图片+文字混排，
vertical-align: bottom会让图片底边和文字底边对齐到单元格底边，而非各自独立对齐 - 不要指望靠它让块级子元素内部的文字垂直居中——那是子元素自己的事，需另加布局
别和 text-align 搞混，也别替代 valign
vertical-align 管垂直，text-align 管水平，两者完全正交。想右下角对齐，得同时写：text-align: right; vertical-align: bottom;
旧式 HTML 属性 valign="bottom" 虽然还能用，但已被废弃，现代项目应统一用 CSS。注意：valign 只能用于 <td>/<code><th>/<code><col> 等有限标签，且无法继承，维护性差。
真正容易被忽略的点是：当单元格内容是多行文本且高度超过设定 height 时，vertical-align: bottom 会失效——内容会溢出并从顶部开始显示，而不是“底部锚定后向上撑”。这时候要么去掉固定高度，要么换 flex 布局兜底。
