如何让设置inline-block的h3元素与相邻textarea顶部对齐

方法1：使用vertical-align属性（改动最小） #

inline-block元素默认对齐规则是基线对齐，这是你当前出现错位的核心原因，只需要给两个元素都设置顶部对齐即可：

h3 {
  display: inline-block;
  vertical-align: top;
  /* 可选：调整和textarea的横向间距 */
  margin-right: 8px;
}
textarea {
  vertical-align: top;
}

如果需要让h3文字和textarea内部的输入文字位置更贴合，可以给h3加少量的margin-top微调，比如margin-top: 2px，具体数值根据你的字体大小调整即可。

方法2：使用Flex布局（更推荐，可维护性更高） #

给两个元素的父容器添加Flex布局规则，不需要修改h3、textarea的原有布局属性，后续调整对齐、间距都更灵活：

/* 假设h3和textarea的共同父元素类名为note-container */
.note-container {
  display: flex;
  /* 顶部对齐 */
  align-items: flex-start;
  /* 可选：控制两个元素的横向间距 */
  gap: 8px;
}

内容的提问来源于stack exchange，提问作者Guyface10