内嵌块盒不适合其容器

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 inline-block具有一些内联元素特征。

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

同样，如果您在<p>元素中编写文本，则每次点击空格键或添加换行符时，浏览器都会呈现空格。

同样的规则适用于inline-blockdiv。源中的空格或换行符将导致渲染空间。这会产生意外的宽度，从而导致溢出或缠绕。

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

.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>

另一种方法设置font-size: 0在父项上，如有必要，还可以恢复子项上的字体：

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

<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

我坚持要你只添加一个属性。一个删除boxdiv 之间的空格。只需添加float:left;到您的.boxclass / 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>

更新：要使它居中，只margin:0px auto;为您的.ok类/ div 添加一个属性。检查更新的演示和SNIPPET。

注意：这会使boxdiv中的文本保持对齐，所以如果你想让它居中，只需在CSS中添加text-align:center;你的.box类。