12

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>
nalzok
  • 14,965
  • 21
  • 72
  • 139
raldi
  • 21,344
  • 33
  • 76
  • 86

4 Answers4

9

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

Community
  • 1
  • 1
Shog9
  • 156,901
  • 35
  • 231
  • 235
  • Argh! You're right -- adding display:block fixes this problem. However, it reopens this one: http://stackoverflow.com/questions/129651/how-do-i-keep-a-div-from-expanding-to-take-up-all-available-width Is it possible to have a table that (1) collapses margins and (2) doesn't expand to take up all available width? – raldi Sep 25 '08 at 23:22
  • 1
    Near as i can tell, no. Only normal block elements will allow their margins to collapse, and width + padding + borders + margins are calculated for block level elements such that the resulting sum is the width of the containing block. You can put a table inside a block with a margin though... ;-) – Shog9 Sep 25 '08 at 23:36
  • I checked this. Table works as expected without 'display:block' – Jitendra Vyas Jan 14 '14 at 11:11
3

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.

flash
  • 388
  • 4
  • 15
2

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.

Jonny Buchanan
  • 61,926
  • 17
  • 143
  • 150
  • Thank you for pointing that out. I also thought it would contradict the spec. I no longer do thanks to your explanation :-) --- ah and sorry for that out-of-band-comment. I believe SO rules don't endorse "thank you comments". Won't happen again! – NicBright Jun 19 '15 at 14:33
  • From 2018, it looks that your initial understanding was true and since then all browsers have fixed that _bug._ The `display: table` elements generate two boxes instead one, the _table wrapper box_ and the table box itself, but the former does participate in the block formatting context, so vertical margins set for that element do collapse with its siblings margins. – Ilya Streltsyn Jun 05 '18 at 10:32
-1

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
hubbardr
  • 3,153
  • 1
  • 21
  • 27