为什么边距在此标签元素上不起作用？

Question

我想增加标签和输入之间的空间。我尝试对Form元素使用填充，但没有用。现在，我尝试直接在标签上设置边距，但无法再使用。这是为什么？

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-1 {
  border: 1px solid black;
  padding: 15px 50px;
  background-color: white;
}

.form-1 form {
  font-size: 20px;
}

.input-form label {
  margin-bottom: 50px;
}

<main style="height:100%; width:100%" ;>
  <div class="form-1">
    <form class="input-form">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe">
    </form>
  </div>
</main>

Answer 1

您需要将display属性设置为block或inline-block，如下所示：

label {
  display: inline-block;
}