5

次の html ドキュメントには 2 つの 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 />境界線がある場合、ネストされた上マージンが含まれているためです。jsfiddleのデフォルト設定によってマージンが削除されているため、@Elliottのフィドルは機能しないことに注意してください。

編集：詳細については、これをチェックしてくださいhttp://reference.sitepoint.com/css/collapsingmargins

于 2012-11-29T12:05:13.190 に答える
4

デフォルトでは、<h1>要素には上下の余白があり、これらの余白は折りたたまれています。余白がどのように折りたたまれるか (つまり、結合されるか) については規則があります。あなたの例に適用されるルールは次のとおりです。

親と最初/最後の子

ブロックの margin-top と最初の子ブロックの margin-top を分離する境界線、パディング、インライン コンテンツ、またはクリアランスがない場合、または境界線、パディング、インライン コンテンツ、高さ、最小高さ、または最大値がない場合ブロックの margin-bottom をその最後の子の margin-bottom と分離するための高さ。折りたたまれたマージンは、親の外に出ます。

あなたの例では、ルールは次のように読むことができます。

  • div#withoutには境界線がなく、その上マージン (0) は上マージンh1(~20px) で折りたたまれます。折りたたまれたマージンは div の外に出ます。これは、これらの 20px が div の高さに追加されないことを意味します。

  • div#withには境界線があるため、上余白(~20 ピクセル) がdiv内h1にレンダリングされ、予想より 20 ピクセル高くなります。

于 2012-11-29T12:15:33.000 に答える