Question

请考虑以下代码：

＆＃13;

.container {
  min-height: 100px;
  background-color: lightgreen;
}

p {
  margin-bottom: 50px;
}

＆＃13;

<div class="container">
    <p>Welcome</p>
</div>
<div class="after">
  Main content.
</div>

＆＃13;

http://jsfiddle.net/Lp4tp/31/

问题：

MDN's margin collapse page表示如果在父元素上设置了最小高度，这将阻止其底部边距与其最后一个子元素的底部边距相邻 - 这将防止边距折叠。对我而言，这是有道理的。

父母和第一个/最后一个孩子：
如果没有边框，填充，内联部分，block_formatting_context创建或间隙将块的边缘顶部与其第一个子块的边缘顶部分开，或者没有边框，填充，内联内容，高度，最小高度，或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

然而，在这个例子中，DevTools显示了p标签的底部边缘 - 正好在p元素下面 - 但是在容器下面有50px的空白区域，这没有意义。 p标签的边缘似乎仍然以某种方式折叠，最终在父节点之外并影响下一个元素的位置，即使p和.container的边距不相邻，并且DevTools显示p标签＆＃39;边缘不在.container底部附近。

任何人都有任何解释为什么保证金仍然有点崩溃并留下空白区域.container？另外，MDN页面错误地说min-height会阻止边缘崩溃吗？

谢谢

CSS奇怪行为：最小高度和边距折叠

0 个答案: