如何让textarea高度与相邻input元素保持对齐？

默认情况下，<input>和<textarea>因为浏览器默认样式（盒模型、内边距、边框、对齐方式）的差异，直接放在一起会出现高度不对齐的问题。以下是几种可靠的解决方法：

方法1：统一盒模型与基础样式 #

通过重置两者的盒模型和样式属性，消除默认差异，确保高度一致：

input, textarea {
  /* 让元素高度包含内边距和边框，避免计算偏差 */
  box-sizing: border-box;
  /* 统一内边距 */
  padding: 8px;
  /* 统一边框样式 */
  border: 1px solid #ddd;
  /* 统一字体属性，避免行高差异 */
  font-size: 14px;
  line-height: 1.4;
}

textarea {
  /* 禁止用户调整高度（可选，若允许调整可移除） */
  resize: none;
  /* 顶部对齐，避免基线对齐导致的视觉错位 */
  vertical-align: top;
}

对应HTML结构：

<div>
  <input value="input test">
  <textarea>textarea test</textarea>
</div>

方法2：利用Flex布局自动对齐 #

通过Flex容器让子元素自动填充高度，这种方式更灵活，适合需要元素占满容器高度的场景：

.input-group {
  display: flex;
  /* 可选：添加元素间距 */
  gap: 10px;
}

input, textarea {
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
}

textarea {
  resize: none;
  /* 可选：让textarea占据剩余宽度 */
  flex: 1;
}

对应HTML结构：

<div class="input-group">
  <input value="input test">
  <textarea>textarea test</textarea>
</div>

方法3：CSS变量精确控制高度（适合复杂场景） #

通过CSS变量统一管理高度相关属性，方便后续维护和调整：

:root {
  --input-padding: 8px;
  --input-border-width: 1px;
  --input-font-size: 14px;
  --input-line-height: 1.4;
}

input, textarea {
  box-sizing: border-box;
  padding: var(--input-padding);
  border: var(--input-border-width) solid #ddd;
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
}

textarea {
  /* 精确计算高度：字体行高 + 上下内边距 + 上下边框 */
  height: calc(var(--input-font-size) * var(--input-line-height) + 2 * var(--input-padding) + 2 * var(--input-border-width));
  resize: none;
  vertical-align: top;
}

关键注意点 #

• box-sizing: border-box是核心：它让元素的高度计算包含内边距和边框，避免默认content-box导致的高度膨胀。
• vertical-align: top：解决元素基线对齐带来的视觉错位问题，确保两者顶部对齐。
• 若需要允许用户调整textarea高度，移除resize: none即可，初始高度依然会保持对齐。

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