Question

有人可以帮助我理解为什么#child与#parent的大小不同吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Title</title>
    </head>
    <body>
        <div id='parent' style='border: 1px solid black'>
            <div id='child' style='background-color: #888888'>
                <p>Here is some content</p>
                <div id='grandchild' style='margin-bottom: 1em'>
                    <p>A little more content</p>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

这是发生了什么：

保证金崩溃。 Jeroen的回答向我指出W3C box model specs for collapsing margins，这让我头疼，并没有完全回答边界的问题（Oded首先指出）。然后我找到了this article并将解决方案拼凑在一起（我只谈到顶部边距，但这个完全相同的解决方案适用于底边距）。

当两个[块级]元素的垂直边距接触时，使用较大的边距并且丢弃较小的边距。
代码中的所有内容都被视为块级元素，包括<html>和<body>标记。
<body>在其父margin-top元素中的默认<html>为8px。
第一个代码的默认margin-top为16px。
保证金折叠不仅限于兄弟姐妹，因此标记会开始检查其父标记的位置和边距。
#child元素的margin-top为0. 上边距触及#child上边距，因此它们会折叠为单个16px边距（16> 0）。 代码的16px边距“推出”并充当#child代码的边距。
的16px余量仍在检查其正上方的边距。接下来将成为#parent标记，其余边距也为0.
但是，#parent上的1px边框会阻止继续前进。 不会再遇到任何边距在它之上，因为它触及1px边框。因此，折叠会在#parent的上边框内停止。
渲染16px上边距，下方是{0}边距折叠的#child标记。

这就是为什么#parent框比#child框高32px：边距“崩溃”直到它们击中不是边距的东西（1px边框）。那么，如果#parent上的1px边框不能用于阻止崩溃，会发生什么？

按照上面的步骤1-7进行操作。
的上边距会进入#parent元素的0px上边距。同样，是更大的边距（16对0），因此崩溃继续向上。
的上边距点击<body>标记。 <body>的默认上边距为8px。 标记较大，因此现在<body>标记已“继承”了16px的上边距，并且丢弃了8px。
上边距达到<html>标记。由于<html>是根元素，因此折叠在此处停止。 <body>代码以16px的上边距呈现，#parent，#child和元素全部呈现在下方; 位于#parent框内，因为边距已经崩溃。

这让我花了这么长时间才弄清楚的原因与我今天没有听说过利润率崩溃的原因相同： Firebug并没有清楚地描述崩溃的利润。在Firebug中，标记仍显示它保持16px的上边距。这是真的。但是，没有迹象表明发生了任何崩溃 - <body>标记仍会报告8px顶部边框，即使它已被丢弃。

我很高兴我现在知道了;它澄清了我对页面布局的混淆。

编辑：

The article I referenced非常值得一读。它不仅为我提供了答案所需的信息，而且还详细说明了在IE7中，<body>标记如何不参与边框折叠。这解释了很多。

Answer 2

因为你的父div在自身周围有1px的边框，而孩子没有。

这会为父div的宽度和高度增加2个像素。

Answer 3

由于p上的标准边距和bottom-margin上的#grandchild。它们以body的标准边距崩溃。

您可以重置body，p等的边距，并使用填充而不是边距来避免这种情况;填充物不会崩溃。

父子维度计算

3 个答案: