5

下面的 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>
4

2 回答 2

6

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

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

于 2012-11-29T12:05:13.190 回答
4

默认情况下，<h1>元素具有顶部和底部边距，并且这些边距是折叠的。关于边距如何折叠（即合并）有一些规则。适用于您的示例的规则是：

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

如果没有边框、内边距、内联内容或间隙将块的外边距顶部与其第一个子块的外边距顶部分开，或者没有边框、内边距、内联内容、高度、最小高度或最大-height 将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

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

  • div#without没有边框，它的上边距（为 0）折叠为上边距h1（约为 20px）。折叠的边距最终在 div 之外。这意味着这 20px 不会添加到 div 的高度。

  • div#with有一个边框，所以h1（大约 20 像素）的上边距在 div内呈现，使其比预期高 20 像素。

于 2012-11-29T12:15:33.000 回答