CSS问题：textarea与文本输入框宽度不一致的解决求助

我正在搭建一个包含两个文本输入框和一个textarea的简单表单，希望所有元素垂直排列且完美对齐，三者宽度保持一致。但无论我如何调整参数，textarea的右侧始终显示得比文本输入框稍宽一些。请问有什么解决思路吗？

我的代码： #

CSS

form {
  display: flex;
  flex-direction: column;
  max-width: 60%;
}

.form-groep {
  display: flex;
  flex-direction: row;
}

label {
  margin-bottom: 1rem;
  width: 20vw;
  font-size: 1.3vw;
}

input,
textarea {
  padding: 8px;
  font-size: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 40vw;
  margin: 0;
}

textarea {
  resize: none;
  height: 10vw;
  box-sizing: border-box;
}

HTML

<form action="contactformulier.php" method="post">
  <div class="form-groep">
    <label for="naam">Naam *</label>
    <input type="text" id="naam" name="naam" tabindex="1" required>
  </div>
  <div class="form-groep">
    <label for="email">E-mailadres *</label>
    <input type="email" id="email" name="email" tabindex="2" required>
  </div>
  <div class="form-groep">
    <label for="bericht">Bericht *</label>
    <textarea id="bericht" name="bericht" tabindex="3" required></textarea>
  </div>
  <input type="submit" value="Verzend" tabindex="4"/>
</form>

我尝试了所有能想到的参数调整，这已经是多次尝试后的最佳效果了。

核心问题是盒模型规则不统一：你只给textarea设置了box-sizing: border-box;，但input默认使用content-box——这意味着input的宽度仅计算内容区域，而textarea的宽度包含了内边距（padding）和边框（border），最终导致两者视觉宽度不一致。

修复步骤： #

1. 给所有表单控件（input、textarea）统一设置box-sizing: border-box;，确保宽度计算规则一致
2. 可选但推荐：全局统一盒模型，避免后续其他元素出现类似布局问题

修改后的CSS代码： #

/* 全局统一盒模型，彻底避免盒模型计算差异 */
* {
  box-sizing: border-box;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 60%;
}

.form-groep {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem; /* 将label的垂直间距移到容器上，保持表单组间距统一 */
}

label {
  width: 20vw;
  font-size: 1.3vw;
  align-self: center; /* 让标签与输入框垂直居中对齐，视觉更协调 */
}

input,
textarea {
  padding: 8px;
  font-size: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 40vw;
  margin: 0;
  /* 统一盒模型，这里如果已经全局设置，这行可以省略 */
  box-sizing: border-box;
}

textarea {
  resize: none;
  height: 10vw;
}

额外优化说明： #

• 把label的margin-bottom移到.form-groep上，避免最后一个表单组下方多出不必要的间距，让整体垂直布局更均匀
• 添加align-self: center;给label，让标签和输入框在垂直方向居中对齐，提升视觉舒适度

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