爲什麼兩個彼此相鄰的內聯塊使用的總寬度超過其總寬度？

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