CSS margin collapsing?

Question

I'm working with Google Chrome on OS X, and I seem to be running into a margin collapse issue. I have two divs stacked on top of each other, both with a margin-top of 2px and a margin-bottom of 5px, and both with a 1px border. According to my arithmetic, there should be 1+1+2+5=7px of space between the "content" areas of the divs, since the border prevents the margins from collapsing?

More confusing is that, in a location where I have a div with a 3px border and a 0 margin-top underneath one of the previously described divs, I end up with 9px of space (as I so dearly desire). The only difference between the divs is the additional class that shrinks the border and redefines the margins, so both divs have the same padding (only padding-bottom is 0). Can anyone point out where I've gone wrong?

Answer 1

Margin is interpreted as minimum space to the next element.

Thus there should be a 5 px gap between the elements. See it as if they overlap.

Answer 2

Borders consume part of the margin space. Adjacent margins collapse.

Ignore the border for a moment. Say you have two disvs. Top has 2px margin bottom. Bottom has 5px margin top. What's the space between them? The correct answer is 5px, being the maximum of those two values. It is not additive.

Now add 1px borders to each and you reduce that margin to 3px.

Answer 3

Perhaps a parent class, with more weight, or an id, is having more priority(you know, ID have more specificity, or a parent, etc. Those complex hierarchy relations(or you have an !important; somewhere..)), and that one has margin:0 or padding:0, somehow.

Anywa, it's easier to guess with a chunk of html and its css... :) Because could be many things.