Home/ Questions/Q 8719617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T06:50:29+00:00

Out of curiosity, considering the example below, why does having the margin on the

  • 0

Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.

I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

Example also on JSFiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you paint the backgrounds of html and body (giving each its own color), you’ll quickly notice that body is being shifted down along with #container, and #container itself isn’t offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).

    It’s this behavior that’s causing the scrollbar to appear, since you’ve declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.

    • 0