td或th中多行文字顶对齐应设vertical-align: top，仅对td/th生效；不可用于table或tr；需配合清除padding或设height确保效果。
td 或 th 里多行文字怎么顶对齐
直接写 vertical-align: top，但必须作用在 td 或 th 上，不能写在 table 或 tr 上。这个属性只对 display: table-cell 元素生效。
常见错误是给 tr 加 vertical-align: top，它完全没效果；或者给整个 table 设，也无效。
-
td { vertical-align: top; }是最简方案，整表统一生效 - 如果某列要特殊处理，用
td:nth-child(1) { vertical-align: top; } - 配合
padding-top: 0;可消除默认留白，让文字真正“贴顶”，但注意这会去掉所有上内边距，需同步检查是否影响其他样式 - 不要依赖
valign="top"—— HTML5 已废弃，浏览器兼容性差，且遇到任何 CSS 布局（如 flex、grid）或继承的vertical-align就失效
div 里放多行文本和 inline 元素时怎么顶部对齐
典型场景：一个 div 里有 input[type="checkbox"] + 一段换行的说明文字，希望复选框和第一行文字顶部平齐。
这时候别碰 vertical-align，它对 flex 项目无效；也别调 line-height，容易破坏多行一致性。
立即学习“前端免费学习笔记（深入）”；
- 给父
div加display: flex; align-items: flex-start; - 加
gap: 0.75rem;控制复选框与文字间距（比用margin更干净） - 文字不用额外包裹
span或p—— 匿名文本节点在 flex 中自动成为 item，可直接对齐 - 如果必须兼容老版本 IE，
gap需回退为margin-left，但现代项目基本可忽略
多行段落自身怎么顶对齐到容器上沿
比如一个固定高度的 div，里面是 p 标签，想让段落内容从容器顶部开始显示，而不是默认居中或留空。
这里 vertical-align 无效（p 是块级元素），text-align 也只管水平方向。
- 给容器设
display: flex; flex-direction: column; justify-content: flex-start; - 或者更轻量：给
p加margin-top: 0;，并确认父容器没有padding-top或border-top干扰视觉位置 - 若容器高度固定且内容可能溢出，加
overflow: hidden;防止错位被误判为“没顶上” - 慎用
line-height: 1;强制贴顶 —— 它会压缩行高，多行文本可能挤在一起，可读性下降
为什么写了 vertical-align: top 还是看起来没顶到边
不是代码没生效，而是视觉干扰项太多。真实原因往往藏在默认样式里。
- 浏览器 UA 样式给
td设了padding: 2px，实际离顶距离来自 padding，不是对齐问题 - 中英文混排时，字体 ascender 高度会让文字“视觉上浮”，这不是 bug，是字体度量本身决定的
- 单元格没设
height或min-height，导致高度由内容撑开，vertical-align失去参照基准 - 父级用了
display: grid或flex，把td当普通子元素渲染，vertical-align直接被忽略
真正顶到像素边界的组合极少需要，多数场景下 vertical-align: top + 清除 padding 就已足够。过度追求“绝对贴边”反而会让文字失去呼吸感，尤其小字号时易显压抑。
