内联块框不适合其容器[重复]

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 元素默认情况下会使用一些额外空间进行渲染。

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

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>

另一种方法在父级上设置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>

其他选项包括负边距、省略结束标签、使用注释标签、浮动和弹性盒。有关详细信息，请参阅本文：

• Fighting the Space Between Inline Block Elements

Answer 2

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

Demo : UPDATED

.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。查看更新的演示和片段。

注意：这会使box div 中的文本左对齐，因此如果您希望它居中，只需将text-align:center; 添加到CSS 中的.box 类即可。