保证金底部不会推动元素下跌

Question

我有一个浮点数，然后我有2个元素

，边距为40px，我预计gab是80px，因为每个元素每个都有40px的边距框。但结果显示只有40px，为什么？

  <p id="P_4">
  </p>
  <p id="P_5">
  </p>

#P_4,
#P_5 {
  margin: 0px 0px 40px;
}

Answer 1

在css margin: top right bottom left;中你需要了解css

margin:10px 5px 15px 20px;

• 上边距为10px
• 右边距为5px
• 下边距为15px

• 左边距是20px

  保证金：10px 5px 15px;

  • 上边距为10px
  • 左右边距为5px
  • 下边距为15px

  保证金：10px 5px;

  • 顶部和底部边距为10px
  • 左右边距为5px

  余量：10px的;

  • 所有四个边距均为10px

#P_4,
#P_5 {
  margin: 40px 0px;
}

<p id="P_4">
text
  </p>
  <p id="P_5">
  text
  </p>

Answer 2

这称为margin collapsing，因为两段都是空的。只要将文本放入其中，就不会再发生折叠。

＆＃13;

＆＃13;

.P_4,
.P_5 {
  margin: 0px 0px 40px;
  background-color: red;
}

div {
  float: left;
  clear: both;
  border: thin solid black;
}

＆＃13;

<div>
  <p class="P_4">
  </p>
  <p class="P_5">
  </p>
  <p>c
  </p>
</div>

<div style="margin-top: 1em;">
  <p class="P_4">a
  </p>
  <p class="P_5">b
  </p>
  <p>c
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;