Why doesn't a <table>'s margin collapse with an adjacent <p>?

Question

From my understanding of the CSS spec, a table above or below a paragraph should collapse vertical margins with it. However, that's not happening here:

<table style="margin: 100px; border: solid red 2px">
 <tr><td>
  This is a one-celled table with 100px margin all around.
 </td></tr>
</table>

<p style="margin:100px">This is a paragraph with 100px margin all around.</p>

I thought there would be 100px between the two elements, but there are 200px -- the margins aren't collapsing.

Why not?

Edit: It appears to be the table's fault: if I duplicate the table and duplicate the paragraph, the two paragraphs will collapse margins. The two tables won't. And, as noted above, a table won't collapse margins with a paragraph. Is this compliant behavior?

Answer 1

I think this is down to different browser implementations of CSS. I've just tried your code, and Firefox3 doesn't collapse the vertical margin, but IE7 and Safari3.1.2 do.

Answer 2

My understanding is that the vertical margins only collapse between the table and caption [1]. Otherwise a table should behave as any other block element [2] (ie 2 elements both with 100px margins = 200px between them).

1. http://www.w3.org/TR/CSS2/tables.html#q5
2. http://www.w3.org/TR/CSS2/box.html

Answer 3

Margin collapsing is only defined for block elements. Try it - add display: block to the table styles, and suddenly it works (and alters the display of the table...)

Tables are special. In the CSS specs, they're not quite block elements - special rules apply to size and position, both of their children (obviously), and of the table element itself.

Relevant specs:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/visuren.html#block-box

Answer 4

I originally thought that Firefox 3 isn't honouring this part of the CSS specification:

Several values of the 'display' property make an element block-level: 'block','list-item', and 'run-in' (part of the time; see run-in boxes), and 'table'.

I say that because the spec says the following about collapsing margins...

Two or more adjoining vertical margins of block boxes in the normal flow collapse.

...and setting the table's style to display: block makes the margin collapse as you'd expect and setting it back to display: table undoes the collapsing again.

But looking at it again, the spec also says this (emphasis mine):

Block-level elements (except for display 'table' elements, which are described in a later chapter) generate a principal block box... Principal block boxes participate in a block formatting context.

And then, in the Block Formatting Context section:

Vertical margins between adjacent block boxes in a block formatting context collapse.

Reading that makes me think it's correct that margins between a table (which doesn't participate in a block formatting context) and a paragraph (which does) shouldn't collapse.