努力理解 "collapsed margin" 如何为 "parent and first/last child" 工作

Question

我目前正在 MDN 上学习 collapsed margin。相邻兄弟姐妹的折叠边距很容易理解。但是，我很难理解 "parent and first/last child" 的折叠边距是如何工作的，尤其是最后一句以蓝色突出显示。

折叠的边距怎么会出现在父级之外？我似乎无法在脑海中描绘它。

Answer 1

这有帮助吗？ .outer 的 50px 边距和 .inner 的 100px 边距已从 .inner 和 .inner 缩减为单个 100px 边距的边距在父级之外，而不是像您期望的那样在内部。

.outer {
  background: #eee;
  height: 100px;
}
.inner {
  background: red;
  height: 10px;
  margin-top: 100px;
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

这是一个有趣的例子。第一个 parent 没有设置边框。它会自动假定您不想使用 child 边距，但它确实从顶部开始。第二个示例确实设置了边框。现在浏览器假定您明确想要使用 h1 标签的本机边距，并且 parent 适应显示这一点。

.parent1 {
  background-color: #669;
}
.parent2 {
  background-color: #969;
  border: 1px solid #000;
}

<div class="parent1">

  <h1>hello World</h1>

</div>

<div class="parent2">

  <h1>hello World</h1>

</div>

struggling to understand how "collapsed margin" works for "parent and first/last child"