如何让表单DIV垂直间距均等并将span置于输入框下方？

问题1：输入框容器垂直间距不均 #

原因 #

HTML中部分.input-box容器之间添加了<br>标签，会额外产生间距，导致#text1-div、text-area1-div、text-area2-div与#text2-div之间间距不一致；同时你添加的.form-div div样式因选择器范围过广（包含.submit-button等其他div），或者<br>的存在被抵消，未生效。

解决方法 #

1. 移除多余<br>标签：删除HTML中.input-box之间的所有<br>元素
2. 统一设置输入框容器外边距：添加以下CSS，精准控制.input-box的底部间距：

.form-div .input-box {
  margin-bottom: 20px;
}

问题2：错误提示span置于输入框正下方 #

原因 #

span默认是行内元素，即便设置display:block，也无法与输入框对齐——输入框是在宽度200px+右侧10px间距的.form-label之后的位置。

解决方法 #

给错误提示span设置左侧外边距，匹配输入框的起始位置，同时确保为块级元素：

.form-div .input-box span {
  display: block;
  margin-left: 210px; /* 与.form-label的宽度+右侧间距一致：200px + 10px */
  color: red;
}

如果错误提示使用了.error-message类，可直接修改该类样式：

.error-message {
  color: red;
  display: none;
  margin-left: 210px;
}

关键代码修改示例 #

调整后的HTML片段（移除<br>）

<div class="input-box" id="text1-div">
  <label class="form-label" id="project-name1">Project name:</label>
  <input type="text" name="Project name" class="form-input" id="text1" autocomplete="off" value="project-name-1" />
  <span id="error-msg-text1"></span>
</div>
<div class="input-box" id="text-area1-div">
  <label class="form-label" id="protein-seq1">Protein Sequence:</label>
  <textarea name="protein-sequence" class="form-textarea" id="text_area1">Protein Sequence~1</textarea>
  <span id="error-msg-text-area1"></span>
</div>
<div class="input-box" id="text-area2-div">
  <label class="form-label" id="sec_struct1">Secondary Structure:</label>
  <textarea name="secondary-structure" class="form-textarea" id="text_area2">Secondary Structure~1</textarea>
  <span id="error-msg-text-area2"></span>
</div>
<div class="input-box" id="text2-div">
  <label class="form-label" id="email">Email:</label>
  <input type="text" name="email" class="form-input" id="text2" autocomplete="off" value="abc@xzy.com" />
  <span id="error-msg-text2"></span>
</div>

新增/修改的CSS代码

.form-div .input-box {
  margin-bottom: 20px;
}

.form-div .input-box span {
  display: block;
  margin-left: 210px;
  color: red;
}

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