CSS block elements creating gaps between div elements

Question

I'm having difficulties with spaces between div blocks:

<div id="maincontentwrapper" >
  <img src="images/content-top.png" alt="main content border image" border="1" />
  <div id="maincontent" >
    <div id="pagecontent">
       <h1>Mission Statement</h1>
    </div>
  </div>
  <img src="images/content-bottom.png" alt="main content border image" />
</div> 

This is creating a page with a full bordered image. All is well, however as soon as I enter a block level element inside of pagecontent, e.g. the header as shown, then a gap appears between the content-top.png image and the maincontent div.

If I change the first character to be inline, e.g. a non-breaking space or simply a letter, then the gap does not appear.

This is the (relevant) css:

img {
 margin: 0;
 padding: 0;
}
#maincontentwrapper { 
}
#maincontent {
 background-image: url('../../images/content-main.png');
 background-repeat: repeat-y;
 min-height: 300px;
 width: 757px;
}
#pagecontent {
 width: 625px;
 margin-left: auto;
 margin-right: auto;
}

Thanks for any help

Solution

It's probably a margin applied by the browser by default. Try your code with

h1 { margin: 0; }

added to the CSS. Does that help?

(The h1 element is not the only block-level element to "suffer" from this, p has default margins in most browsers too.)

If you're pretty sure your client's browser will support CSS3, you have a backup mechanism, or you just don't care, you could do

.maincontent :first-child, .maincontent :first-child :first-child {
    margin: 0;
}

which will set the first child's margin to 0, regardless of the type of the element.

Something else you could do is apply a "reset stylesheet" that undoes the browsers' defaults by masking them with zeroes. However, I would not advise you to do so, since the browsers' defaults actually make sense most of the time, and resetting them all could lead to disturbing effects.

Comments

[Quentin]

alt="main content border image"? Seriously? Go and read alanflavell.org.uk/alt/alt-text.html right now!

[neil]

That fixed it. Thanks. I guess I need to learn more about the box model as I assumed it would simply add a margin to the header within the div block it's in not the outer block. The reason it looked so bad is I have a background on the body and that margin on the header was creating a 10 pixel white block across the whole page.

[neil]

setting the margin to 0 for the header fixed it, as above. But I guess how do I fix it for any other element?

[neil]

I mean a 10 pixel gap across the page. Is there a better way than resetting every element's margin?

[neil]

The css fixed it. It works for IE8, Chrome and FF3.6. I'm getting it tested on others to see how it goes. Thanks very much. However, I still don't understand how the block element adds a gap and leaves a hole beneath when I thought it would be increasing the block it is in not the blocks outside of it :(