为什么相邻的两个内联块使用的宽度超过了它们的总宽度？

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);
}