margins and nesting

I have two block elements and I need their backgrounds to meet. One contains a paragraph and it seems that the margin of the paragraph is forcing the two elements apart. I'm using firefox. Here's an example:

With the style sheet:

It seems like the two divs should meet because both have a margin of 0, but they don't. Is this behavior correct? What is the best way to get the behavior I'm looking for?

 

It is the margin on the paragraphs that is causing the problem.

It can be fixed by adding these lines to your stylesheet:

#upper p { margin-bottom : 0; }
#lower p { margin-top : 0; }

Code (markup):

 

The problem with that solution is that it would disrupt the margins of consecutive paragraphs inside a single div, especially if I had three parent divs instead of two. Then the middle would have to have 0 top and bottom margin. I'd prefer another solution if anyone knows one. I'd also really like to know if this behavior is actually correct.

 

I found a better solution. Setting overflow for the lower div to hidden appears to fix the problem.

 

Another method would be to set the paragraph to margin:0px; padding-bottom:1em;

So long as you aren't tossing borders on the paragraph, padding instead of margin is often a quick easy fix.