Question

I know this is a common problem but I can’t seem to find a solution that works. I have a setup like this:

 <div id="wrapper">
  <div class="content-area-top"></div>
  <div class="content-area">
   <h1>Title</h1>
   some other text
  </div>
 </div>

.content-area-top {
  height: 12px;
  width: 581px;
  background-image: url(images/content-top.jpg);
 }

.content-area {
margin-left: 10px;
margin-right: 10px;
    background-color: #e9ecfd;
 }

The problem is that there is a gap between .content-area-top and .content-area. the .content-area-top div is sized to contain a background image that gives me the rounded corners that I want.

I know that issue comes form the fact that the H1 tag has a (browser default) top margin set (.67em), but I’m unwilling to set its margin to 0, and I don’t see why its margin applies ‘outside’ its containing div.

I’m using chrome on Mac, but firefox has the same issue. This is probably some well-known fix, but I couldn’t find a a solution specific to my case.

Answer 1

See here for a related question:

Why would margin not be contained by parent element?

in which a great article on margin collapse is presented:

http://reference.sitepoint.com/css/collapsingmargins

The article does have some pointers.

The answer is that the margin on H1 collapses with its parent(.content-area) margin (0 in this case), and so the parent div takes on the H1 margin. To prevent that, the parent div (.content-area) needs to have a padding set or a border or something set to prevent the collapse (which, in my case, brings my two divs together correctly)