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

为什么？因为div设置为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>

其他选项包括 负边距 ， 省略关闭标签 ， 使用注释标签 ， 浮点数 和 flexbox 。请参阅本文以获取更多详细信息：

• 争取内联块元素之间的空间