Box model question: collapsing margin between table cells

extra space in nested table cells, CSS

[brycen]

I'm missing something pretty fundamental about the CSS box model. The following generates whitespace between the outer edge of the two green table cells, and the red border of the table:

<table style="border: 5px solid red; margin: 0px; padding: 0px;"> 
 <tr> 
 <td style="border: 5px solid green; 
  margin: 0px; padding: 0px;">Text</td> 
 </tr> 
 <tr> 
 <td style="border: 5px solid green; 
 margin: 0px; padding: 0px;">Text</td> 
 </tr> 
</table> 

What exactly is this space? The padding of the red table border? The margin of the green table cells?

I can make it "go away" with "border-collapse: collapse;" but that feels like a hack that would require extensive browser testing. Can someone help set me straight?

[cameraman]

You're gonna love this...
add cellspacing="0" to the table element.

[brycen]

Ick. So much for modern standards-based design ;-). But it did appear to work... at least on today's browser.

[Robin_reala]

border-collapse:collapse should be doing what you want here, and it works fine in nearly all browsers (including IE5+).

If you want the equivalent of cellspacing="1" or greater then you’d need to use a combination of border-collapse:separate and border-spacing:x, but that unfortunately doesn’t work in IE. Not an issue for your current problem though.