我已经成功地将h2元素的边距包含在其容器中-section元素。这样，它不会随着p元素的边距而崩溃。我通过将overflowsection元素的设置为来完成此操作auto。
我的问题是：
由于overflow设置为除以外的任何元素visible的边距都不能折叠，为什么我成功实现的效果仅在将container（section）元素设置为时才起作用auto？将h2元素设置为时，为什么它不起作用auto？
当我们去除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>
由于将溢出设置为可见以外的任何元素的边距无法折叠，为什么仅在将容器（节）元素设置为auto时才能成功实现的效果？将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将以section的空白为0进行合拢，结果空白将移动到section：
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，它也可以与其他边距折叠：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句