logo标签列表

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

htmlcss
5
以下html文档有两个div，一个带边框（id ='with'），一个没有（id ='without'）。带边框的div在渲染时（至少在Firefox和Chrome上）比没有边框的高很多。
我曾预期它们最多会在高度上相差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>
1
刚刚调试了一下这个：http://jsfiddle.net/kAZmD/ - Elliott
我在IE9中得到了74/74分，在Chrome中得到了80/80分。 - Elliott
@Elliott，请看下面我的回答；jsfiddle默认使用normalise css。禁用它，你就会明白OP的意思了。 - Stuart Burrows
1
啊！以前从没注意过那个复选框 :) 现在是135/113。 - Elliott
2个回答
6
这是因为当存在边框时，嵌套的 <h1 /> 的顶部外边距会被包含在内。注意 @Elliott 的 fiddle 不起作用，因为 jsfiddle 的默认设置已移除了边距。编辑：查看此链接获取更多信息：http://reference.sitepoint.com/css/collapsingmargins。
4
默认情况下，<h1>元素有顶部和底部边距，并且这些边距会折叠。有关如何折叠（即组合）边距的规则。适用于您示例的规则是：

父元素和第一个/最后一个子元素

如果没有边框、填充、内联内容或间隙来分隔块的margin-top与其第一个子块的margin-top，或者没有边框、填充、内联内容、高度、最小高度或最大高度来分隔块的margin-bottom与其最后一个子块的margin-bottom，则这些边距会折叠。折叠的边距最终位于父元素之外。

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

  • div#without没有边框，它的顶部外边距（为0）与h1的顶部外边距（约为20px）折叠在一起。折叠的外边距最终出现在div之外。这意味着这20px不会增加div的高度。

  • div#with有一个边框，因此h1的顶部外边距（约为20px）被渲染在div内部，使其比预期高20px。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接