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

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