Question

不确定我做错了什么，我认为通过添加边框，整齐地适合那4个盒子。

.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的{{1}}具有一些内联元素特征。

inline-block元素之间的空格或换行符将导致浏览器呈现空格。

同样，如果您要在span元素中书写文字，每次点击空格键或添加换行符时，浏览器都会呈现空格。

同样的规则适用于<p> div。源中的空格或换行符将导致渲染空间。这会产生意外的宽度，这可能导致溢出或包裹。

一种解决方案是删除源中元素之间的所有空格：

＆＃13;

inline-block

＆＃13;

.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%;
}

＆＃13;

另一种方法在父级上设置<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>，如有必要，还可以恢复子级上的字体：

＆＃13;

font-size: 0

＆＃13;

.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;
}

＆＃13;

其他选项包括负边距，省略结束标记，使用评论标记，浮动和 Flexbox的。有关更多详细信息，请参阅此文章：

Fighting the Space Between Inline Block Elements

Answer 2

我会坚持要只添加一个属性。删除box div之间的空格。只需将float:left;添加到.box类/ div。

即可

Demo : UPDATED

.ok{
    margin:0px auto; /* ADDED */
    width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
    padding:0px auto;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
    float:left;
}

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

更新：要将中心添加再添加一个属性margin:0px auto;到您的.ok类/ div。检查更新的演示和SNIPPET。

注意：这会使box div中的文字保持左对齐，因此如果您希望它居中，只需将text-align:center;添加到CSS中的.box类

内嵌块盒不适合其容器

2 个答案: