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?
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