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

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

html css

Html 为什么1px宽度的边框会使div增加20像素？,html,css,Html,Css,下面的html文档有两个div，一个带边框（id='with'），另一个不带边框（id='without）。带边框的div的渲染（至少在firefox和chrome上）明显高于带边框的div 我原以为它们的高度最多相差2个像素，但警报告诉我它们的高度相差19个像素我不明白这是为什么 <!DOCTYPE HTML> <html> <head> <title>Height of divs with/without a border</tit

下面的html文档有两个div，一个带边框（

id='with'

），另一个不带边框（

id='without

）。带边框的div的渲染（至少在firefox和chrome上）明显高于带边框的div

我原以为它们的高度最多相差2个像素，但

警报告诉我它们的高度相差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>


带/不带边框的div高度
$（文档）.ready（函数（）{
警报（$（'#with'）。高度（）+'/'+
$（'无'）.height（）；
});
有边界
bla

bla

bla

无国界
bla

bla

bla

这是因为嵌套的
的上边距包含在有边框时。注意@Elliott的提琴不起作用，因为JSFIDLE的默认设置已经删除了边距
编辑：查看此项了解更多信息默认情况下，
元素有上下边距和下边距。关于页边距如何折叠（即合并）有一些规则。适用于您的示例的规则是：
父母和第一个/最后一个孩子
如果没有边框、填充、内联内容或对的清除
将块的边距顶部与其第一个块的边距顶部分开
子块，或无边框、填充、内联内容、高度、，
“最小高度”或“最大高度”来分隔块的页边距底部
随着最后一个子元素的边距底部，边距将崩溃。
折叠的页边距最终位于父页边距之外
在您的示例中，规则可以理解为：

div#没有
没有边框，它的上边距（0）被折叠，上边距为h1
（约20px）。折叠的边距结束于div之外。这意味着这些20px不会增加div的高度
div#with
有边框，因此h1
（约20px）的上边距在div内渲染，使其比预期高20px
只是摆弄了一下：我在ie9中得到74/74，在ie9中得到80/80chrome@Elliott请看下面我的答案；默认情况下，JSFIDLE使用规范化css。禁用它，您将看到OP的含义！以前从未注意到复选框：）现在是135/113。