vertical-align: top 仅对 display: table-cell 或 inline/inline-block 元素生效，对 block 元素无效；需配合 display: inline-block 或 flex 布局（align-items: flex-start）实现可靠顶部对齐。
vertical-align: top 只对 table-cell 和 inline 元素生效
直接给 div 或 p 设 vertical-align: top 没用——它会被忽略，因为这些元素默认是 display: block，而 vertical-align 仅作用于 display: table-cell（如 td）或 display: inline/inline-block 元素。
常见错误现象：写了一堆 vertical-align: top 却发现完全没反应；或者加了 display: inline-block 后文字底部参差不齐，误以为是 vertical-align 失效。
- 必须显式设
display: inline-block（或table-cell），再配vertical-align: top -
inline-block元素默认有换行符/空格产生的间隙，建议用font-size: 0在父容器上消除，或改用 Flex - 若内容含图片或图标，确保它们也设了
vertical-align: top，否则基线会按默认baseline对齐，拖低整体顶部位置
Flex 布局中 align-items: flex-start 是更稳的“顶部对齐”
当多列是并排 div，且你希望它们的内容（无论文字、图片、按钮）严格顶边对齐，display: flex + align-items: flex-start 是最直接可靠的方案。
它不依赖字体度量，也不受行内基线干扰，行为可预测。但要注意：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器必须设
display: flex，子项无需额外 display 转换 -
align-items: flex-start对齐的是每个子项的**内容盒顶部**，不是文字 ascender 顶点；若要像素级贴顶，需配合margin-top: 0、padding-top: 0和line-height: 1（后者慎用，可能截断 descender） - 旧版 iOS Safari（align-items 在单行 flex 容器中支持不稳定，尤其混用
vertical-align时；稳妥起见可加align-content: flex-start显式兜底
多尺寸文字共存时，“顶部对齐” ≠ “基线对齐”，别混用 baseline
如果一列是 font-size: 16px，另一列是 font-size: 24px，用 vertical-align: baseline 会让它们的基线对齐——结果是小字看起来“被吊高”，大字“沉下去”，视觉上反而不齐。这不是 bug，是字体度量决定的。
此时你要的不是基线对齐，而是顶部边缘对齐。所以：
- 避免在多尺寸文本场景下使用
vertical-align: baseline - 不要指望
line-height调整能统一不同字号的顶部位置——line-height控制的是行盒高度，不是字体内部 ascender 高度 - 真要精确控制（比如电商价格标签中 ¥ 和数字不同大小但顶对齐），得用
transform: translateY()手动微调，或借助opentype.js读取字体度量后动态计算偏移
表格里用 vertical-align: top 最省事，但别忘清 padding
如果多列本身就是 td，那直接写 td { vertical-align: top; } 就行。这是唯一标准、零兼容性风险的写法。
但常被忽略的是：浏览器默认给 td 加了 padding: 2px，导致内容离上边有白边，误以为没对齐。
- 务必同时重置
padding-top: 0，才能看到真正的“顶到边”效果 - 如果单元格内是单行文字，可加
line-height: 1进一步压缩上下空间；但若后续可能变多行，line-height: 1会导致行间重叠，不如用height+overflow: hidden控制裁切 - 不要在
tr或table上设vertical-align，它不继承，也不生效
