为什么顶部段落边距触及div？

Question

div {
  background: gray;
  width: 200px;
  height: 200px;
}

p {
  margin-top: 24px;
  margin-bottom: 24px;
  color: white;
  padding: 5px;
  width: 100px;
}

.one {
  background: orange;
  outline: 2px solid blue;
}

.two {
  background: lightskyblue;
  outline: 2px solid red;
}

<div>
  <p class="one">Paragraph One</p>
  <p class="two">Paragraph Two</p>
</div>

为什么第一段的边距会塌陷？即为什么第一段触及 div 容器？

Answer 1

因为两个元素（div 和 p）属于同一个 Block formatting context 因此它们的边距会折叠，margin collapsing strong> 是 Block formatting context 的设计属性。

---

如果您想防止这种情况发生，请让 <div> 建立自己的Block formatting context.

您可以通过 MDN

中所述的多种方式实现此目的

这里我在 <div>

上使用了 overflow:auto

div {
  background: gray;
  width: 200px;
  height: 200px;
  
  /* NEW */
  overflow:auto
}

p {
  margin-top: 24px;
  margin-bottom: 24px;
  color: white;
  padding: 5px;
  width: 100px;
}

.one {
  background: orange;
  outline: 2px solid blue;
}

.two {
  background: lightskyblue;
  outline: 2px solid red;
}

<div>
  <p class="one">Paragraph One</p>
  <p class="two">Paragraph Two</p>
</div>