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

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>

由于某种原因，中间的消息的边距与名字和姓氏的边距重叠，但不会与下面三个消息的边距（你可以看到距离更大）。

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

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>

Answer 2

因为下面的三条消息是float。

  

浮动和绝对定位元素的边距永不崩溃。

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing。

要解决此问题，您需要将所有行放在不同的<div class="row">中，并为row类添加一个clearfix。

＆＃13;

＆＃13;

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%;
}

/* The clearfix */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.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%;
}

＆＃13;

<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>
<div class="row">
  <div class="col-12">
    <button class="btn">Submit</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;