嵌入式块盒无法放入其容器中

嵌入式块盒无法放入其容器中

问题在于，

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