views:

22

answers:

3

I wonder why diametrically opposed margins (a margin-top following a margin-bottom) between to 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?

+2  A: 

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

Gaby
A: 

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).

CalebD
I think the OP understands that, and is wondering *why* that is.
Matchu
Yes I should probably learn to read.
CalebD
+1  A: 

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

Sarfraz
Does a table count as close enough to inline?
Matchu
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.
Sarfraz