Tables and the margin collapse
Further confusion surrounding margins and their collapsing behaviour.
As we’ve seen before vertical margins between block elements (such as paragraphs) collapse, such that the greater margin is used, and the smaller ignored. However, margins around tables behave a little differently from what we might expect:
This is just a simple paragraph.
| one | two |
This is just a simple paragraph.
And another simple paragraph.
In this example, the paragraphs are twice as close to each other than the table is to either paragraph. The margins between the table and its neighbouring paragraphs do not collapse.
Why on earth not? Isn’t a table just like any other block element? Well, no as a matter of fact: tables have a display: table value, by default, which controls the entire table-ness. One side-effect of this table display is no collapsing margins.
So, no matter what vertical margin scheme you’re using, remember the golden rule:
Tables’ vertical margins do not collapse
Updates
Tuesday 24th February 2009
It appears as if Safari 4 doesn’t render this correctly: all margins are identical.
Monday 9th March 2009
After some much needed further research, it seems as if the behaviour is actually undefined by the spec, according to this thread on the www-style mailing list. A Firefox bug has been logged for this issue, but it cannot be confirmed or denied until the W3 clarifies the spec. For now, we’ll just have to accept the browser incompatibility.
Comments
Murray said:
I've changed my mind. It’s not a bug. It’s just that firefox and tables seem to be pretty annoying.
Mon 9 Mar 2009 16:11
Murray said:
This actually appears to be a firefox bug. I’m calling this a bug as Opera, Chrome, Safari, ie6 are collapsing these margins. There is something going on with firefox and tables. If you add a border to the top cell, or top of a table, firefox appears to render this with a margin-top: -1px for some reason. All other browsers render it properly.