父母和第一个/最后一个孩子

Question

下面的html文档有两个div，一个带边框（id='with'），另一个没有（id='without）。带边框的div（至少在firefox和chrome上）显着高于带边框的div。

我曾预计它们的高度最多会有2个像素，但alert告诉我它们的高度是19像素不同。

我无法弄清楚为什么会这样。

<!DOCTYPE HTML>
<html>
<head>
  <title>Height of divs with/without a border</title>
  <script type="text/javascript" src='jquery-1.8.3.js'></script>

  <script type='text/javascript'>

    $(document).ready(function() {

           alert($('#with'   ).height() + ' / ' + 
                 $('#without').height());

    });

  </script>

</head>
<body>

  <div style='width:300px;border:black 1px solid;background-color:yellow' id='with'>
    <h1>With a border</h1>
    bla<br>
    bla<br>
    bla<br>
  </div>

  <div style='width:300px;background-color:green' id='without'>
    <h1>Without a border</h1>
    bla<br>
    bla<br>
    bla<br>
  </div>

</body>
</html>

Answer 1

这是因为当有边框时，包含嵌套<h1 />的上边距。注意@ Elliott的小提琴不起作用，因为jsfiddle的默认设置已删除了边距。

编辑：请查看更多信息http://reference.sitepoint.com/css/collapsingmargins

Answer 2

默认情况下，<h1>元素有一个上边距和下边距these margins are collapsed。关于边距如何折叠（即合并）的规则。适用于您的示例的规则是：

父母和第一个/最后一个孩子

如果没有边框，填充，内联内容或间隙   将块的边缘顶部与其第一个边缘顶部分开   子块，或没有边框，填充，内联内容，高度，   min-height或max-height分隔块的边距底部   在最后一个孩子的边缘底部，那些边缘崩溃了。   折叠的保证金最终在父母之外。

在您的示例中，规则可以理解为：

div#without没有边框，其上边距（为0）折叠为h1的上边距（约为20px）。 折叠的边距最终在div 之外。这意味着这些20px不会增加div的高度。
div#with有一个边框，因此h1的上边距（约为20px）会在内部 div中呈现，使其比预期的高出20px

为什么宽度为1px的边框会将div增加20像素？

2 个答案:

父母和第一个/最后一个孩子