Why the space after the table, and how to remove it?

HTML:

<span id="a">
  <span id="b">
    <span id="c">
      Text
    </span>
  </span>
</span>

CSS:

#a { display: block;        border: 2px solid #e00; }
#b { display: inline-block; border: 2px solid #0e0; }
#c { display: table;                                }

This shows as:

You can view this in this jsFiddle.

Notice how there is no space between the top of the green/inner box and the red/outer box, but there is some space between the bottom of the green/inner and red/outer box. This is caused by the display: table. Adding margin: 0; padding: 0 on all 3 boxes doesn't have an effect. So my questions are:

1. How do you explain this added space? I'm finding this to be somewhat unusual.
2. How can you avoid it, assuming you need to keep the display as-is on all 3 elements, you can't change the HTML (can't add or remove elements), but otherwise you can add any CSS you'd like?