css vertical gap between divs

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.

Use a css reset file, you will get more consistent behavior in browsers. http://developer.yahoo.com/yui/reset/ — Dustin Laine, Jun 04 '10 at 15:09
I tried that, and it collapses the space between the two divs, but then as soon as I put a style with a margin back on the h1, the gap reappears. The real issue seems to be that any margin on h1 extends beyond the div that surrounds it, when , to my mind, the margin should be completely contained inside the containing div. — meecect, Jun 04 '10 at 15:26
There is another question asked that is very similar, here: http://stackoverflow.com/questions/2176520/why-would-margin-not-be-contained-by-parent-element but no great answers. If I make the .content-area block have display:inline-block, it works as expected, but that isn't implemented very well in all browsers. — meecect, Jun 04 '10 at 15:42
actually the article linked on the other referenced question (http://reference.sitepoint.com/css/collapsingmargins) does have some pointers. The answer is that the margin on H1 collapses with its parent 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) — meecect, Jun 04 '10 at 15:49

score 16 · Accepted Answer · edited May 23 '17 at 12:34

16

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)

edited May 23 '17 at 12:34

Community

1
1

answered Jun 04 '10 at 15:51

meecect

549
1
6
16

4

+1, very nice. To re-iterate this answer, just set a padding-top on #content-area – Ryan Kinal Jul 08 '10 at 17:35
Thanks a bunch, this had me stumped – Clinton Green Feb 13 '13 at 02:54

score 1 · Answer 2 · answered Sep 11 '10 at 08:50

Margins aren't supposed to collapse if there is a border between them. So you can add a hidden border to prevent margin collapse.

The following worked for me in my tested versions of FF, Chrome & IE.

<!-- Set the border-color to your background color. 
     If default white background colour use #FFFFFF -->
<div style="background-color: #8DB3E2; border-color: #8DB3E2; border-style:solid; border-width:1px; "> 

  <p >Paragraph 1 in blue box</p>

  <p >Paragraph 2 in blue box</p>

  </div>

  <!-- No space here thanks -->

  <div style="background-color: #9BBB59; border-color: #9BBB59; border-style:solid; border-width:1px; "> 

  <p >Paragraph 1 in green box</p>

  <p >Paragraph 2 in green box</p>

  </div>

score 0 · Answer 3 · answered Mar 02 '11 at 04:42

0

Try giving a valid doctype. It worked for me :)

Refer this : A list apart has said it beautifully!

Yogesh

answered Mar 02 '11 at 04:42

Yogesh Pitale

9
1

score -1 · Answer 4 · answered Jul 08 '10 at 17:28

Try this approach:

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

#content-area {
  width:561px; /* substract margin left & right values from it's width */
  float:left;
  display:inline; /* prevent ie6-double-margin bug */
  margin:0 10px;
  background-color:#e9ecfd;
}

#wrapper {
  width:581px;
  float:left;
}

css vertical gap between divs

4 Answers4

Linked