即使使用边框，列正在包装设置为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>