父子维度计算答案

【问题标题】：Parent and child dimension calculations父子维度计算
【发布时间】：2011-06-13 06:03:23
【问题描述】：

谁能帮我理解为什么#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>

【问题讨论】：

标签： html border margin css

【解决方案1】：

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

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

【讨论】：

为什么边框会导致这种情况？我认为添加边框不会影响尺寸，除了边框的厚度。编辑：如果这个评论不清楚；是的，你说得对，边框是改变尺寸的罪魁祸首。我只是不明白为什么。

【解决方案2】：

因为p 上的标准边距和#grandchild 上的bottom-margin。它们以body 的标准边距折叠。

您可以重置body、p 等的边距，并使用填充而不是边距来避免这种情况；填充不会塌陷。

【讨论】：

border: 1px solid black 如何导致不同的行为？
@Jake，这是一个非常好的问题，答案可能在 W3C 文档中的某个地方，他们正在讨论盒子模型和折叠边距。就盒子而言，我通常依赖填充，因为边距会导致头疼...

【解决方案3】：

这是怎么回事：

边距折叠。 Jeroen 的回答将我指向了W3C box model specs for collapsing margins，这让我很头疼，并且没有完全回答边界问题（这是 Oded 首先指出的）。然后我找到了this article 并将解决方案拼凑在一起（我说的是上边距，但这个完全相同的解决方案适用于下边距）。

当两个[块级]元素的垂直边距接触时，使用较大的边距，丢弃较小的边距。
代码中的所有内容都被视为块级元素，包括<html> 和<body> 标记。
<body> 在其父 <html> 元素内具有 8px 的默认 margin-top。
第一个  标记的默认 margin-top 为 16 像素。
边距折叠并不局限于同级，因此 标签开始检查其父标签的位置和边距。
#child 元素的 margin-top 为 0。 上边距与 #child 上边距接触，因此它们折叠成一个 16 像素的边距 (16 > 0)。  标签的 16px 边距“穿透”并充当 #child 标签的边距。
 的 16px 边距仍在检查其正上方的边距。接下来将是#parent标签，它的顶部边距也为0。
但是，#parent 上的 1px 边框阻止了  继续前进。  不会在其上方出现更多的边距，因为它很感人1px 边框。所以折叠停止在#parent 的顶部边界内。
16px的上边距被渲染，下面是#child标签，其0px的边距被折叠了。

这就是为什么#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> 标记仍报告 8 像素的顶部边框，即使它已被丢弃。

我很高兴我现在知道了；它澄清了我对页面布局的许多困惑。

编辑：

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

【讨论】：

没问题。很高兴我能帮上忙！