内嵌块盒不适合其容器

Question

内嵌块盒不适合其容器

不知道我做错了什么，我认为通过添加边框，它将整齐地适合那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默认情况下，元素会使用一些额外的空间进行渲染。为什么？因为divset&nbsp;inline-block具有一些内联元素特征。span元素之间的空格或换行符将导致浏览器呈现的空间。同样，如果您在<p>元素中编写文本，则每次点击空格键或添加换行符时，浏览器都会呈现空格。同样的规则适用于inline-blockdiv。源中的空格或换行符将导致渲染空间。这会产生意外的宽度，从而导致溢出或缠绕。一种解决方案是删除源中元素之间的所有空格：.ok&nbsp;{ &nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;background:&nbsp;red; &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;box-sizing:&nbsp;border-box;}.box&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;box-sizing:&nbsp;border-box; &nbsp;&nbsp;width:&nbsp;25%; &nbsp;&nbsp;border:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;height:&nbsp;100%;}<div&nbsp;class="ok"><div&nbsp;class="box">1</div><div&nbsp;class="box">2</div><div&nbsp;class="box">3</div><div&nbsp;class="box">4</div></div>另一种方法设置font-size: 0在父项上，如有必要，还可以恢复子项上的字体：.ok&nbsp;{ &nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;background:&nbsp;red; &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;box-sizing:&nbsp;border-box; &nbsp;&nbsp;font-size:&nbsp;0;}.box&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;box-sizing:&nbsp;border-box; &nbsp;&nbsp;width:&nbsp;25%; &nbsp;&nbsp;border:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;font-size:&nbsp;16px;}<div&nbsp;class="ok"> &nbsp;&nbsp;<div&nbsp;class="box">1</div> &nbsp;&nbsp;<div&nbsp;class="box">2</div> &nbsp;&nbsp;<div&nbsp;class="box">3</div> &nbsp;&nbsp;<div&nbsp;class="box">4</div></div>其他选项包括负边距，省略结束标记，使用注释标记，浮点数和弹性框。有关详细信息，请参阅此文章：战斗内联块元素之间的空间

Answer 2

我坚持要你只添加一个属性。一个删除boxdiv&nbsp;之间的空格。只需添加float:left;到您的.boxclass / div。演示：更新.ok{ &nbsp;&nbsp;&nbsp;&nbsp;margin:0px&nbsp;auto;&nbsp;/*&nbsp;ADDED&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;width:300px; &nbsp;&nbsp;&nbsp;&nbsp;background:red; &nbsp;&nbsp;&nbsp;&nbsp;height:100px; &nbsp;&nbsp;&nbsp;&nbsp;box-sizing:border-box; &nbsp;&nbsp;&nbsp;&nbsp;padding:0px&nbsp;auto;}.box{ &nbsp;&nbsp;&nbsp;&nbsp;display:inline-block;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;box-sizing:border-box; &nbsp;&nbsp;&nbsp;&nbsp;width:25%; &nbsp;&nbsp;&nbsp;&nbsp;border:2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;&nbsp;&nbsp;height:100%; &nbsp;&nbsp;&nbsp;&nbsp;float:left;}<div&nbsp;class="ok"><div&nbsp;class="box">1</div><div&nbsp;class="box">2</div><div&nbsp;class="box">3</div><div&nbsp;class="box">4</div> &nbsp;&nbsp;&nbsp;&nbsp;</div>更新：要使它居中，只margin:0px auto;为您的.ok类/ div&nbsp;添加一个属性。检查更新的演示和SNIPPET。注意：这会使boxdiv中的文本保持对齐，所以如果你想让它居中，只需在CSS中添加text-align:center;你的.box类。