了解边距折叠

Question

我已经成功地将 h2 元素的边距包含在其容器 - section 元素中。这样它就不会随着 p 元素的边距折叠。我通过将部分元素的overflow 设置为auto 来完成此操作。

我的问题是：

1. 由于overflow 设置为visible 以外的任何元素的边距不能折叠，为什么我成功实现的效果只有在容器（部分）元素设置为@ 时才有效987654327@?为什么h2元素设置为auto时不起作用？

2. 当我们去掉 p 元素的边距，并且没有将 section 设置为 auto 时，h2 将失去其上边距。为什么会这样？它似乎没有与另一个会使其崩溃的边距接触。

如果有帮助，请查看 codepen！ https://codepen.io/rfrostr/pen/XWmzewp

<header>
  <p>I am a p element.
  </p>
</header>

<section id="profile-section">
 <h2>I am a h2 element</h2>
</section>

Answer 1

既然溢出设置为非可见元素的元素不能折叠边距，为什么我成功实现的效果只有在容器（部分）元素设置为自动时才有效？为什么h2元素设置为auto时不起作用？

这不是真的。溢出将禁用元素与其流入的第一个（或最后一个）子元素之间的边距折叠，而不是与其兄弟元素之间的边距折叠。溢出创建一个块格式化上下文，这会将内部的所有元素与任何外部交互隔离开来。

h2 {
  margin:10px 0;
  overflow:auto; /* this will do nothing */
}

.box {
  margin:10px 0;
  outline:1px solid red;
}

<div class="box">
<h2>some text</h2>
<h2>some text</h2>
</div>

<div class="box" style="overflow:auto;">
<h2>some text</h2>
<h2>some text</h2>
</div>

在上面的例子中，所有的边距都将折叠，但不是第二部分与其子 h2 之间的边距。

当我们去掉 p 元素的边距，并且没有将 section 设置为 auto 时，h2 失去了它的上边距。为什么会这样？它似乎没有与另一个会使其崩溃的边距接触。

h2 将与节的边距为 0 折叠，生成的边距将移动到节：

p {
  margin: 0;
} 

section {
  /*overflow: auto;*/
  background:red;
}

<header>
  <p>I am a p element
  </p>
</header>

<section id="profile-section">
 <h2>I am an h2 element</h2>
</section>

即使一个元素的边距等于 0，它也可以与其他边距折叠：