Home/ Questions/Q 8967067
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:09:52+00:00

The follwoing html document has two divs, one with a border ( id=’with’ )

  • 0

The follwoing html document has two divs, one with a border (id='with') and one without (id='without). The div with the border is rendered (at least on firefox and chrome) significantly higher than the one with the border.

I had expected them to vary at most 2 pixels in height, yet, the alert tells me that their height is 19 pixels different.

I can’t figure out why that is.

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By default, the <h1> element has a top and bottom margin and these margins are collapsed. There are rules about how the margins are collapsed (i.e. combined). The rule that applies to your example is:

    Parent and first/last child

    If there is no border, padding, inline content, or clearance to
    separate the margin-top of a block with the margin-top of its first
    child block, or no border, padding, inline content, height,
    min-height, or max-height to separate the margin-bottom of a block
    with the margin-bottom of its last child, then those margins collapse.
    The collapsed margin ends up outside the parent.

    In your example, the rule can be read as:

    • div#without does not have a border, its top margin (which is 0) is collapsed with the top margin of h1 (which is ~20px). The collapsed margin ends up outside the div. This means that these 20px do not add to the height of div.

    • div#with has a border, so the top margin of h1 (which is ~20px) is rendered inside the div, making it 20px taller than expected.

    • 0