如何为表单文本列与输入字段设置合理间距？

核心问题分析 #

你遇到的margin-bottom无效，主要源于这几个问题：

• HTML结构存在错误（嵌套的<h1>、重复的id/name），导致样式解析异常
• 表单内的标签和输入框未形成独立块级分组，margin-bottom无法作用到正确元素
• 外层display:flex未设置排列方向，导致内部元素布局混乱

解决方案步骤 #

1. 修复HTML结构错误

• 移除嵌套的<h1>标签（原代码写了<h1><h1>...</h1>，属于无效嵌套）
• 给每个输入框设置唯一的id和name（原代码多个输入框复用lastName，会导致表单提交异常）
• 用<div>包裹每个标签-输入框组，方便统一控制间距

2. 用CSS精准控制间距

• 给表单组添加margin-bottom实现上下间距
• 给标签设置横向间距，或用flex布局控制标签与输入框的排列
• 调整外层flex容器的排列方向，让表单内容垂直展示

修改后的完整代码 #

HTML部分

<div style="display:flex;">
  <div id="application-image-intro">
    <img id="application-image-1"
         src="https://via.placeholder.com/400x600" 
         alt="lady-sitting-table-near-laptop-smartphone">
  </div>
  <div class="application-start" style="display: flex; flex-direction: column; padding: 2rem;">
    <h1 style="font-family: arial; color:#56aeff;">Register to start</h1>
    <h2>Already registered? login here</h2>
    <div class="application-form">
      <form action="submit.php" method="post">
        <!-- 每个表单组用div包裹 -->
        <div class="form-group">
          <label class="apply-name" for="fullname">Full Name</label>
          <input type="text" id="fullname" name="fullname" required>
        </div>

        <div class="form-group">
          <label class="apply-email" for="email">Your email</label>
          <input type="email" id="email" name="email" required>
        </div>

        <div class="form-group">
          <label class="apply-country" for="country">Country of residence</label>
          <input type="text" id="country" name="country" required>
        </div>

        <div class="form-group">
          <label class="apply-birth" for="birthdate">Date of birth</label>
          <input type="date" id="birthdate" name="birthdate" required>
        </div>
      </form>
    </div>
  </div>
</div>

CSS部分

/* 表单组上下间距 */
.form-group {
  margin-bottom: 1.5rem;
}

/* 标签与输入框的横向间距 */
.form-group label {
  display: inline-block;
  margin-right: 0.5rem;
  /* 若希望标签独占一行，可替换为以下样式 */
  /* display: block;
  margin-bottom: 0.5rem; */
}

/* 输入框样式优化 */
.form-group input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

关键说明 #

• 用.form-group包裹每个标签和输入框，给该类添加margin-bottom即可实现表单组之间的上下间距
• 若需要标签与输入框垂直排列，只需将label设置为display:block并添加margin-bottom
• 修复了重复的id/name，同时把邮箱、日期输入框改为对应类型（email/date），提升用户体验

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