了解保证金崩溃

Question

我已成功将 h2 元素的边距包含在其容器 - section 元素中。这样它就不会与 p 元素的边距一起折叠。我通过将 section 元素的 overflow 设置为 auto.

来完成此操作

我的问题是：

因为 overflow 设置为 visible 以外的任何元素都不能折叠边距，为什么我成功实现的效果只有在容器时才有效(section) 元素设置为 auto？为什么h2元素设置为auto时不起作用？
当我们去掉 p 元素的边距，并且没有将 section 设置为 auto 时，h2 将失去其上边距。为什么会这样？它似乎没有与另一个会使其崩溃的边距接触。

看看代码笔是否有帮助！ 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

Since elements with overflow set to anything other than visible can't have their margins collapsed, why does the effect I've successfully achieved only work when the container (section) element is set to auto? Why does it not work when the h2 element is set to auto?

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

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 之间的边距不会折叠。

When we take away the margin of the p element, and don't have section set to auto, h2 loses its upper-margin. Why does this happen? It doesn't seem to be in contact with another margin which would make it collapse.

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，它也可以用其他边距折叠：

了解保证金崩溃

Understanding margin-collpasing

css

margin