为什么两个彼此相邻的内联块使用的总宽度超过其总宽度？

Question

如果问题措辞严重，请抱歉。

我正试图让两个跨度彼此相邻。 它们的公共容器宽度为100%，所以我认为给它们宽5%和95%都可行，但事实并非如此。我还将边距和填充设置为零。

请看小提琴： http://jsfiddle.net/q5ZX9/

以上是小提琴的代码：

HTML（正文）：

<span id='outer'>
    <h1>Outer</h1>
    <span id='left'>
        left
    </span>
    <span id='right'>
        right
    </span>
</span>

CSS：

*{
    margin:0;
    padding:0;
}
#outer
{
    width:100%;
    display:inline-block;
    background:rgba(0,0,0,0.5);
}
#left
{
    width:5%;
    display:inline-block;
    background:rgba(200,0,0,0.5);
}
#right
{
    width:95%;
    display:inline-block;
    background:rgba(00,0,200,0.5);
}

Answer 1

#left{
  float: left;
  width:5%;
  display:inline-block;
  background:rgba(200,0,0,0.5);
}
#right{
  float: left;
  width:95%;
  display:inline-block;
  background:rgba(00,0,200,0.5);
}