即使使用邊框，列正在包裝設置爲50％

Question

我有以下代碼，我不能確定列爲什麼包裝，如果我將列寬更改爲49％，它不會包裝。我正在最新版本的Chrome中查看它。我意識到我可以使用浮動，但我試圖確定爲什麼這不起作用。

<div class="container"> 
<div class="column"> 
    aaaa 
</div> 
<div class="column"> 
    bbbbb 
</div> 

.column { 
    box-sizing:border-box; 
    border:1px solid black; 
    width:50%; 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 
.container { 
    width:100%; 
    box-sizing:border-box; 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 

小提琴：http://jsfiddle.net/h1tyLbbe/1/

Answer 1

這是由於inline-block的元素仍然以空格考慮。

如果你做到以下幾點，它會工作：

<div class="container"> 
    <div class="column"> 
    aaaa 
    </div><!-- 
--><div class="column"> 
    bbbbb 
    </div> 
</div> 

或

<div class="container"> 
    <div class="column"> 
    aaaa 
    </div><div class="column"> 
    bbbbb 
    </div> 
</div>