Why don't diametrically opposed margins overlap with a table being involved?

Question

I wonder why diametrically opposed margins (a margin-top following a margin-bottom) between two block elements (eg. divs) are merged, while between a block element and a table, those margins add up.

Example:

<style>
    .a { margin-bottom: 18px; }
    .b { margin-top: 6px; }
</style>

<div class="a">Foo</div>
<div class="b">Bar</div>

...

<table class="a">...</table>
<div class="b">Bar</div>  

Please note: if I change the table's display property to "block" it behaves just like any other pair of block elements and their margins are merged.

Why is that?

Answer 1

It is a part of the box model called collapsing margins and w3 explains it better than i could

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

The merge between block-level elements (Divs, etc) and sum up in a block-level element and inline element. See this for more info.

Answer 3

It is because tables do not have a default display value of block but instead of a display value of table. If you set .a { display: block; } you will see that the margins are indeed collapsed together (at least in Firefox 3.6).