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

对不起，如果这个问题措辞不好

我在试着把两个跨度挨在一起。 他们的通用容器有

100%

宽度，所以我认为给他们

5%

和

95%

宽度会起作用，但事实并非如此。我还将所有内容的边距和填充设置为零

请看小提琴：

这是上面小提琴的代码：

HTML（正文）：

---

对我已经把浮子放得够远了：对；右边的，其他的都一样，但还没试过。谢谢如果你能说说为什么没有浮动它就不能工作，那也太好了。块级元素通常从新行开始，因此你必须按比例将它们向左或向右浮动，使它们彼此相邻。好的，但这些是内联块，所以它们不应该已经这样做了吗？不，我说的是“块级”我的意思是，

内联块

，你可以只设置

内联

，然后它们将彼此相邻，但在这种情况下，它们不会“接受宽度属性”。总而言之，最好给他们一个浮点值，比如在创建导航列表时，也可以设置块级别，例如

ulli{float:left；…}

。如果您想使用

显示示例：表格单元格检查这个。好的。我希望我会记住这个解决方案：）谢谢你的帮助！对我已经把浮子放得够远了：对；右边的，其他的都一样，但还没试过。谢谢如果你能说说为什么没有浮动它就不能工作，那也太好了。块级元素通常从新行开始，因此你必须按比例将它们向左或向右浮动，使它们彼此相邻。好的，但这些是内联块，所以它们不应该已经这样做了吗？不，我说的是“块级”我的意思是，
内联块
，你可以只设置
内联
，然后它们将彼此相邻，但在这种情况下，它们不会“接受宽度属性”。总而言之，最好给他们一个浮点值，比如在创建导航列表时，也可以设置块级别，例如
ulli{float:left；…}
。如果您想使用
显示示例：表格单元格检查这个。好的。我希望我会记住这个解决方案：）谢谢你的帮助！
<span id='outer'>
    <h1>Outer</h1>
    <span id='left'>
        left
    </span>
    <span id='right'>
        right
    </span>
</span>

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

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