html - 为什么 margin-top 不适用于 div 元素？

Question

这是我的 HTML 代码。我想在 .main div 和 .field div 的边界之间设置一些边距。

<div class="main">
   <div class="field">
      <label for="input1" class="block">Name</label>
      <input type="text" id="input1">
   </div>
   <div class="field">
      <label for="input2" class="block">Email</label>
      <input type="email" id="input2">
   </div>
   <div class="field">
      <label for="input3" id="block">Another input field</label>
      <input type="email" id="input3">
   </div>
</div>

下面是CSS。

.field {
    margin-top:  2%;
}
/* For each input field in new line */
input {
    display: block;
}

上述margin: 2%属性适用于所有具有字段类的后续 div 元素，但不适用于第一个 div 元素。相反，它使用 .main 类向下移动整个 div。

这是tryit编辑器中的代码。 https://www.w3schools.com/code/tryit.asp?filename=GHO4LCR8K8NT

标签： htmlcssmargin