Question: I'm setting a margin for a div element, however the body element also gets that margin.

Consider this code:

```
<!-- HTML -->
<body>
  <div>
  </div>
</body>

<!-- CSS -->
<style>
  html,body {
   height:100%;
   margin:0;
   padding:0;
   outline:1px solid blue;
  }

 div {
   margin:20px;
   outline:1px solid red;
 }

</style>

```

This is the result and the problem: 
![http://i54.tinypic.com/29ve1zl.jpg](https://i.stack.imgur.com/mhoAu.jpg)

So far I've solved the problem by adding a `border:1px solid transparent;` property to the body element. This ruins the 100% height because scrollbars appear due to the `1px` border. Why does this happen?

**POSSIBLE SOLUTION** (thanks for the help): Add a `padding-top:1px` and a `margin-top:-1px`, this way the 100% height doesn't gets ruined with the scrollbars and your are avoiding margin collapsing.

Answer: 
This sounds similar to a problem I had: [Margins and negative margins](https://stackoverflow.com/questions/5750088/margins-and-negative-margins). I solved mine by putting a padding-top rather than a border, maybe this works with your design slightly better? Otherwise try this link: <http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html>
This is caused by an effect known as collapsing margins.

> 
> Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them. 
> 
> 
> 

<http://www.w3.org/TR/css3-box/#collapsing-margins>