Css Margin

[driz]

Here is something I don't understand, say I have the following code:<p>my text<p><h3>header</h3><p>some more text</p>I set the CSS so that my paragraphs have a margin-bottom of 15px, and then set the header 3 to have a upper margin of 15px, why does this STILL ONLY have a 15px space between the two??? Why would that NOT equal 30px? I'm not complaining as it works great like this, but I don't understand why it is doing this? They don't have floats on them or anything :S

[driz]

Basically:

<p style="margin: 0 0 15px 0;">TEXT</p><h3 style="margin: 15px 0 0 0;">TEXT</h3>

<p style="margin: 0 0 0px 0;">TEXT</p><h3 style="margin: 15px 0 0 0;">TEXT</h3>

<p style="margin: 0 0 15px 0;">TEXT</p><h3 style="margin: 0px 0 0 0;">TEXT</h3>

All those equal the same! Why? The first one should have a 30px space between it, and the next two should a 15px space because they only have ONE margin between the elements, but the top one has a bottom and a top facing each other, so they should add up to 30px correct? Why is that not happening!even if i do this:

<p style="margin-bottom:15px;">TEXT</p><p style="margin-top:15px;">TEXT</p>

it does the same! I've tested this using reset on the css, making the line-height 1. and playing with display property, but still the same result, is this a bug in CSS?

[jlhaslip]

google css margin-collapse and see this link: http://www.w3.org/TR/CSS21/box.html

[Jerry62704]

Here is something I don't understand, say I have the following code:<p>my text<p><h3>header</h3><p>some more text</p>I set the CSS so that my paragraphs have a margin-bottom of 15px, and then set the header 3 to have a upper margin of 15px, why does this STILL ONLY have a 15px space between the two??? Why would that NOT equal 30px? I'm not complaining as it works great like this, but I don't understand why it is doing this? They don't have floats on them or anything :S

It's a standard behavior that two margins that overlap will move into each other. If you want that space, double it in one.