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 {   margin: 100px;   border: solid red 2px; } p {   margin: 100px }

<table>   <tr>     <td>       This is a one-celled table with 100px margin all around.     </td>   </tr> </table>  <p>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 behaviour?

table {   margin: 100px;   border: solid red 2px; }

<table>   <tr>     <td>       This is a one-celled table with 100px margin all around.     </td>   </tr> </table> <table>   <tr>     <td>       This is a one-celled table with 100px margin all around.     </td>   </tr> </table>

p {   margin: 100px }

<p>This is a paragraph with 100px margin all around.</p> <p>This is a paragraph with 100px margin all around.</p>

Answer 1

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