内嵌块盒不适合其容器

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>

其他选项包括负边距,省略结束标记,使用注释标记,浮点数和弹性框.有关详细信息,请参阅此文章:

• 战斗内联块元素之间的空间