html - 为什么这个中间元素的边距与顶部元素重叠而不是底部元素？

Question

这是一个包含列和输入元素的简单表单:

代码片段:

label {
  display: inline-block;
  margin: 0 0 10px;
}

input {
  color: #343642;
  font-family: 'Oxygen', sans-serif;
  font-size: 16px;
  padding: 10px;
  border-radius: 4px;
  border-width: 1px;
  border-color: #ccc;
  border-top-color: darken(#ccc, 20%);
  border-style: solid;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}

.row {
  max-width: 1230px;
  margin: 0 auto;
  width: 100%;
}

.col-12 {
  margin: 20px 10px;
  width: calc(100% - 20px);
}

.col-6 {
  margin: 20px 10px;
  float: left;
  width: calc(50% - 20px);
}

.col-4 {
  margin: 20px 10px;
  float: left;
  width: calc(100% / 3 - 20px);
}

.btn {
  background: #343642;
  color: #fff;
  font-family: 'Oxygen', sans-serif: font-size: 16px;
  padding: 10px;
  border-radius: 4px;
  border-width: 1px;
  border-color: #343642;
  border-bottom-color: darken(#343642, 20%);
  border-style: solid;
  box-sizing: border-box;
  width: 100%;
}

<div class="row">
  <div class="col-12">
    <h2>Another example</h2>
    <p>This is some example</p>
  </div>
  <div class="col-6">
    <label>First name</label>
    <input type="text" value=""></input>
  </div>
  <div class="col-6">
    <label>Last name</label>
    <input type="text" value=""></input>
  </div>
  <div class="col-12">
    <label>Message</label>
    <input type="text" value=""></input>
  </div>
  <div class="col-4">
    <label>Message</label>
    <input type="text" value=""></input>
  </div>
  <div class="col-4">
    <label>Message</label>
    <input type="text" value=""></input>
  </div>
  <div class="col-4">
    <label>Message</label>
    <input type="text" value=""></input>
  </div>
  <div class="col-12">
    <button class="btn">Submit</button>
  </div>
</div>

由于某些原因，中间的Message 的边距与First name 和Last name 的边距重叠，但不与下面三个Message的边距(可以看到距离比较大)。

这是为什么？以及如何解决？

Answer 1

每一行都需要一个单独的 div，目前所有内容都在同一行中。

<div class="row">
 <div class="col-12">
   <h2>Another example</h2>
   <p>This is some example</p>
 </div>
</div>
<div class="row">
  <div class="col-6">
    <label>First name</label>
    <input type="text" value=""/>
  </div>
  <div class="col-6">
    <label>Last name</label>
    <input type="text" value=""/>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <label>Message</label>
    <input type="text" value=""/>
  </div>
</div>
<div class="row">
  <div class="col-4">
    <label>Message</label>
    <input type="text" value=""/>
  </div>
  <div class="col-4">
    <label>Message</label>
    <input type="text" value=""/>
  </div>
  <div class="col-4">
    <label>Message</label>
    <input type="text" value=""/>
  </div>
  <div class="col-12">
    <button class="btn">Submit</button>
  </div>
</div>