父母和孩子的尺寸计算

有人可以帮我理解为什么#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>

来源

2011-01-21 WorkerThread

填充？保证金？ – SuperSaiyan 2011-01-21 16:08:29

+1这对我来说很奇怪。 – Jake 2011-01-21 16:19:44

这是发生了什么事：

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

当两个[块级]元素的垂直边距感人，较大余量使用和较小的余量被丢弃。
代码中的所有内容均被视为块级元素，包括<html>和<body>标记。
<body>在其父代<html>元素内具有8px的默认margin-top。
第一个标记具有16px的默认margin-top。
保证金折叠不局限于兄弟姐妹，因此标签开始检查其父标签的位置和边距。
的#child元件具有为0的上边距正在触摸#child上边距一个margin-top，所以他们塌陷到单个16px的余量（16> 0）。 标签的16像素边距“通过”，用作#child标签的边距。
从开始的16像素边距仍在检查其正上方的边距。接下来将是#parent标签，其中也有0
一个边距，但在#parent的像素边框防止从去任何进一步。不会碰到它以上的任何边缘，因为它触及1px边框。因此崩溃停止在#parent的顶部边界内。
呈现16px顶部边距，底部是0x10边距被折叠的#child标签。

这就是为什么#parent盒比#child箱32PX高：该利润“撞破”，直到他们碰到了什么东西，这不是一个保证金（该像素边框）。那么，如果#parent上的1px边框不在那里停止合拢，会发生什么？

按照上述步骤1-7。
的顶部边距运行到#parent元素的0px顶部边距。再次，是更大的余量（16比0），所以崩溃继续向上。
的上边距达到<body>标签。 <body>具有8px的默认顶部边距。 标签更大，所以<body>标签已经“继承了”16px顶部边距，并且8px被丢弃。
的上边距达到<html>标签。由于<html>是根元素，因此折叠在此处停止。所述<body>标签生成用16px的顶缘，和#parent，#child和元件所有渲染下方; 在#parent框内很贴切，因为边距在其中崩溃。

之所以这样，我花了这么长的时间找出相同的原因，我没有听说过崩溃边缘的直到今天：萤火虫没有清楚地描绘崩溃边缘。在Firebug中，标签仍显示它拥有16px的上边距。这是真的。但是，没有任何迹象表明已经发生崩溃--标记仍然报告8px顶部边框，尽管它已被丢弃。

我很高兴我现在知道这一点;它澄清了我对页面布局的很多困惑。

编辑：

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

来源

2011-01-21 19:21:21 Jake

因为您的父div的边界为1px，而孩子没有。

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

来源

2011-01-21 16:07:11 Oded

为什么边界造成这种情况？我认为添加边框不会影响尺寸，除了边框的厚度。编辑：如果这个评论不明确，是的，你是正确的，边界是改变尺寸的罪魁祸首。我只是不明白为什么。 – WorkerThread 2011-01-21 16:11:03

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

您可以重置body,p等的边距，并使用填充而不是边距来避免这种情况;衬垫不会倒塌。

来源

2011-01-21 16:10:54 jeroen

`border：1px solid black`如何导致不同的行为？ – Jake 2011-01-21 16:16:21

父母和孩子的尺寸计算

回答

相关问题