爲什麼1px寬度的邊框將div增加20個像素？

的follwoing html文件有兩個div，一個帶有邊框（id='with'），一個沒有（id='without）。帶有邊框的div呈現（至少在firefox和chrome上）明顯高於帶邊框的div。爲什麼1px寬度的邊框將div增加20個像素？

我預期他們以改變高度最多爲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>

來源

2012-11-29 René Nyffenegger

只是撥弄這一點：http://jsfiddle.net/kAZmD/ – Elliott

我得到了IE9七十四分之七十四和80/80鉻 – Elliott

@Elliott看到我的回答如下; jsfiddle默認使用normalize css。禁用它，你會看到什麼OP意味着 – lnrbob