Home/ Questions/Q 6679363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:21:02+00:00

I’m setting a margin for a div element, however the body element also gets

  • 0

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

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This sounds similar to a problem I had: 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

    • 0