extra space added above DIV???

[novicenate]

I'm trying to have a centered DIV with all sorts of text within it, such as h1, h2, p, and so forth. If I don't put those tags and just have text, it works fine. But if I do put in a tag, it puts this space above my DIV! What gives? Here's my code:

<div class="maincontent"><h1>Page title</h1><p>this is some content</p></div>

and here is the style used:

.maincontent{	width:700px;	height:400px;	margin:0 auto;	background-color:red;	}

I am using Firefox on a Mac.

[shadowayex]

h1, h1, p, and many other tags have margins around them that extend out of the div at times, pushing it down. Add these to your css:

h1 {margin: 0px;}h2 {margin: 0px;}p  {margin: 0px;}

And so on for each of tags causing the problem. I have the exact same problem not to long ago . But I added that to my stylesheet and no more problems.

[novicenate]

You are a beautiful man or woman, and I thank you!

[rzea]

That same CSS code, but optmized:

h1,h2,h3,p {  margin:0;}

:)Just be sure not to run into 'unparented' tags, otherwise you're going to have a lot of headaches.To avoid that, here's a small solution:

div.maincontent h1,h2,h3,p {  margin:0;}

Bytes.