Table Margins

Mozilla vs. IE

[pageoneresults]

Quick question...

Why does Mozilla treat margins on tables differently than IE? For example, I have a margin specified as so...

table{margin:15px 30px;}

In IE, it takes into account the element above/below it. In Mozilla, it adds another 15px of margin to the top and bottom of the table. So in effect, I end up with the 15px of margin from the above element plus the 15px of margin from the table which gives me 30px of space.

I noticed this way back when but every now and then forget about it. Then I test in Mozilla and I see the spacing irregularites. Is this an IE bug or Mozilla bug?

[syktek]

I see no issues with this using IE6 and FF1.5 on win2k, perhaps you can give more of your code?

[pageoneresults]

If you have a page that has this...

p{margin:15px;}
table{margin:15px 30px;}

<p></p>
<table></table>

And the margins on the <p> are set to 15px and the margins on the <table> are set to 15px, Mozilla adds the two between and makes it 30px. IE does not, it merges the two and gives you 15px.

Win98/IE6
WinXP/IE6
Mozilla

[Fotiman]

According to the CSS Spec regarding collapsing-margins [w3.org]:

Margins of inline-block elements do not collapse (not even with their in-flow children).

I think Firefox recognizes the table element as an inline-block item (this is my best guess). If you set table to display as block instead, then your margins will collapse:

table{margin:15px 30px; display: block;}

Hope that helps.

[SuzyUK]

Why does Mozilla treat margins on tables differently than IE?

Fotiman, I think that's real close as I agree it is collapsing margins that is causing the difference, however I wonder if there a bit more to it?

Firefox does not support display: inline-block;, so I can't see that it would treat a table as such.. however it does support display: table;, So if it correctly assumes that a table has display: table implicitly set on it (which it does if you check with the DOM inspector), there is nothing in those CSS2.1 collapsing margins recs that say how to handle elements with display: table that I can see.. only block and inline-block are specified.

IE are treating the table as display: block (as per their DOM inspector too).. and following those rules is collapsing the margins.

In CSS2 this is fine and dandy and I have a feeling the complication arises in CSS3 as margins on/in tables will be the equivalent of cellspacing today ~ so they are perhaps ignoring it, or just not auto assuming block status on tables until it's clearer?