内嵌块框不适合他们的容器

不知道我做错了什么，我认为通过添加边框，它将整齐地适合这4个盒子。

http://jsfiddle.net/jzhang172/x3ftdx6n/

.ok{ width:300px; background:red; height:100px; box-sizing:border-box; } .box{ display:inline-block; box-sizing:border-box; width:25%; border:2px solid blue; height:100%; } 

 <div class="ok"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> 

Answer 1

问题在于， inline-block元素默认情况下会呈现一些额外的空间。

为什么？ 因为设置为inline-block的div具有一些内联元素特征。

span元素之间的空格或换行符会导致浏览器呈现空间。

同样的，如果你在<p>元素中写文本，每当你点击空格键或添加一个换行符时，浏览器就会渲染一个空格。

这同样的规则适用于inline-block div。 源代码中的空格或换行符会导致渲染空间。 这造成意想不到的宽度，这可能导致溢出或包装。

一种解决方法是删除源中元素之间的所有空白：

 .ok { width: 300px; background: red; height: 100px; box-sizing: border-box; } .box { display: inline-block; box-sizing: border-box; width: 25%; border: 2px solid blue; height: 100%; } 

 <div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div> 

Answer 2

我会坚持你只添加一个属性。 一个删除空格之间的box 。 只需加上float:left; 到您的.box类/ div。

演示：已更新

 .ok{ margin:0px auto; /* ADDED */ width:300px; background:red; height:100px; box-sizing:border-box; padding:0px auto; } .box{ display:inline-block; box-sizing:border-box; width:25%; border:2px solid blue; height:100%; float:left; } 

 <div class="ok"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div>