问题在于，
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 ><div >1</div><div >2</div><div >3</div><div >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 > <div >1</div> <div >2</div> <div >3</div> <div >4</div></div>其他选项包括 负边距 ， 省略结束标签 ， 使用注释标签 ， 浮点数 和 flexbox 。
