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

Question

不确定我做错了什么，我认为通过添加边框框，它可以很好地适合这四个框。

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