html - 带边距的 HTML 框模型

Question

HTML块元素的盒子模型中有一些我无法理解的东西。

请看下面的jsFiddle：

有一个外层和一个内层<div>，它们的左、上、右和下都有相同的边距。外部<div>的边距是透明的，所以我们可以看到彩色区域周围的白色主体。但是，inner<div>的边距仅在左侧和右侧可见。50px在我看来，橙色区域的上方和下方应该有一个红色的高度条。

为什么我错了？

score 5 · Accepted Answer

垂直边距相互折叠（根据您可以在该链接另一端找到的一些相当复杂的规则），因此内边距顶部占据外边距顶部的下半部分。

score 2 · Accepted Answer

我认为这是关于利润崩溃的问题。http://reference.sitepoint.com/css/collapsingmargins有这方面的信息。

这是一个解决方法/解决方案。

<div id="outer">
    &nbsp;
    <div id="inner">
        Text
    </div>
    &nbsp;
</div>

</p>

2 回答 2