根本原因是label与textarea默认vertical-align值不同且textarea默认box-sizing为content-box；应改用flex布局，设align-items: flex-start并显式声明box-sizing: border-box，ios safari中再加line-height: 1.4微调。
label 和 textarea 默认不顶部对齐，根本原因是两者默认 vertical-align 值不同（label 是 baseline，textarea 是 top），且 textarea 有默认 border 和 padding，导致视觉错位。
为什么 vertical-align: top 不总生效
当 label 和 textarea 处于同一行内流（比如都设为 display: inline-block）时，vertical-align: top 看似合理，但容易被忽略两点：
-
textarea的box-sizing默认是content-box，padding和border会额外撑高，而label没有这些，造成实际顶部基准线不一致 - 若父容器有
line-height，它会影响inline-block元素的基线计算，尤其在字体大小不同时更明显 - 某些浏览器（如旧版 Safari）对
textarea的vertical-align解析存在偏差，top可能对齐到 border-box 顶边，而非 content-box 顶边
用 flex 布局强制顶部对齐
最稳的解法是放弃内联流，改用 display: flex 容器统一控制对齐行为：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.form-group {
display: flex;
align-items: flex-start; /* 关键：不是 center，也不是 baseline */
gap: 8px;
}
<p>.form-group label {
flex: 0 0 120px; /<em> 固定宽度，防文本长度差异 </em>/
margin: 0;
padding: 0;
}</p><p>.form-group textarea {
flex: 1;
min-height: 80px;
box-sizing: border-box; /<em> 必须加，让 padding/border 不影响 flex 尺寸 </em>/
margin: 0;
}
</p>
-
align-items: flex-start确保两者上边缘严格对齐，不受字体、行高、边框干扰 -
box-sizing: border-box在textarea上必须显式声明，否则默认content-box下的padding会让它“看起来比 label 高” - 避免给
label设height或line-height，除非你同步控制textarea的line-height，否则反而引入新错位
iOS Safari 中 label 文字偏上的修复
在 iOS Safari（尤其是 16–17 版本）中，label 文字常视觉上浮起 1–2px，即使用了 flex-start 也难完全抹平。这不是 bug，而是其渲染引擎对小字号 font-family（如系统 San Francisco）的 baseline 补偿策略：
- 给
label加line-height: 1.4（不要用无单位数值，iOS 对line-height: 1解析不稳定） - 或显式设
padding-top: 1px，配合box-sizing: border-box，微调视觉位置 - 不推荐用
transform: translateY()，它会破坏可访问性（屏幕阅读器可能误判位置）
真正麻烦的不是对齐本身，而是不同浏览器对 textarea 的 box-sizing、border 和 font-size 渲染细节不一致；所以只要把 box-sizing: border-box 和 flex 组合用牢，再针对 iOS 加一行 line-height，就能覆盖 99% 场景。其他花哨技巧——比如伪元素撑开、table-cell、负 margin——反而在响应式断点或缩放时更容易崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
