如何正确地为表单的输入字段提供间距？

Question

我无法在表单中的文本列和输入字段之间给出间距。我希望我的网页看起来像第一张图片中的设计，但我得到了下面的第二张图片作为我的结果。

告诉我如何解决这个问题，以便文本列和输入字段之间有间距，就像我在第一张图片中的设计一样？

这是我当前的代码

<div style="display:flex">
<div id="application-image-intro">
  <img id="application-image-1"
  src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/lady-sitting-table-near-        laptop-smartphone.jpg" 
  alt="lady-sitting-table-near-laptop-smartphone">
</div>
<div class="application-start" style="display: flex;">
  <h1><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"><label class="apply-name" for="name">Full Name</label>
      <input type="text" id="fullname" name="fullname" required><br>

      <label class="apply-email" for="email">Your email</label>
      <input type="text" id="lastName" name="lastName" required><br>

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

      <label class="apply-birth" for="date of birth"> Date of birth</label>
      <input type="text" id="lastName" name="lastName" required><br>
  </form>
</div>
</div>
</div>
</div>
</body>

这是我的 codepen 设计工作

https://codepen.io/Samuel-Christian-the-looper/pen/oNRpaBm

我尝试为每个输入字段提供一个要在CSS上修改的标签，但即使我在CSS中为每个指定的输入字段提供一个margin-bottom属性，它也不起作用。

Answer 1

我所做的只是在 HTML 中的所有表单标签后面添加

<br>

。

然后我只是通过这样做来稍微设计一下你的标签和输入字段：

.application-form > form > label {
  font-weight: bold;
}

.application-form > form > input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  margin-bottom: 15px;
  box-sizing: border-box;
}