努力理解＆＃34;崩溃边缘＆＃34;适用于父母和第一个/最后一个孩子＆＃34;

Question

我目前正在了解MDN上的collapsed margin。相邻兄弟姐妹的坍塌边缘很容易理解。但是，我很难理解为什么崩溃的保证金适用于父母和第一个/最后一个孩子＆＃34;，尤其是以蓝色突出显示的最后一个句子。

如果折叠的保证金最终会在父母之外结束？我似乎无法在脑海中描绘出来。

Answer 1

这有帮助吗？ 50px上的.outer和100px边距上的.inner边距已从100px和.inner折叠为.inner个边距保证金在父母之外，而不是像你期望的那样。

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

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

Answer 2

这是一个有趣的例子。第一个父级没有边框集。它会自动假设您不想使用子边距，但它确实从顶部开始。 第二个示例确实有边框设置。现在，浏览器假定您明确要使用h1标记的原生边距，并且父适应显示此内容。

＆＃13;

＆＃13;

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

＆＃13;

<div class="parent1">

  <h1>hello World</h1>

</div>

<div class="parent2">

  <h1>hello World</h1>

</div>

＆＃13;

＆＃13;

＆＃13;