Why are two elements only 50 pixels apart when the top element has a 50px margin-bottom and the bottom element has a 50px margin-top?

I need to make sure that two elements always 100 pixels apart. There are no errors with my code, but for some reason the margin-bottom on the the P tag is set to 50 pixels and the margin-top on a DIV below it is also set to 50 pixels.

Instead of being a total of 100px apart, they are only 50. Can someone explain this? I do not have any floats on the page so it's not due to a clearing issue. All html and css has been validated.

This happens in the lat开发者_如何学运维est version of Chrome and FIrefox 3.6.

Here's an example of my code:

#content p {
    margin-bottom: 50px;
}

#content #posted {
    border-top: 1px dotted #ccc;
    line-height: 20px;
    margin-top: 50px;
}

Margins overlap on top of each other. The maximum margin of the elements will be the margin between two elements.

If this is not what's happening in IE, it's an IE bug, as this is how CSS was designed to work.

You could use padding instead, or just make sure the margin of both elements is 100px.

Margins do not stack like that. The bottom element only sets a 50px margin from the top element, not the top element's margin. Therefore you need to make the margins 100px.