内联块元素框不适合它们的容器

Question

我不确定我做错了什么，我认为通过添加border-box，它会将这四个框完美地适配。

http://jsfiddle.net/jzhang172/x3ftdx6n/

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

- Snorlax

Answer 1

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

为什么呢？因为将一个 div 设置为 inline-block 会具有某些内联元素特征。

在 span 元素之间添加空格或换行符会导致浏览器渲染出一个空格。

同样地，如果您在 <p> 元素中编写文本，每次按下空格键或添加换行符，浏览器都会渲染一个空格。这个规则也适用于 inline-block divs. 在源代码中的空格或换行符会被渲染成一个空格。这会产生意外的宽度，可能导致溢出或换行。

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

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

其他选项包括负边距、省略结束标记、使用注释标记、浮动和弹性盒子布局。有关更多详细信息，请参见此文章：

• 解决行内块元素之间的空格问题

- Michael Benjamin

---

美丽的解释和链接非常有帮助，我爱你，结婚吗？ - Snorlax

Answer 2

我建议您只添加一个属性。它可以去除box div之间的空格。只需在.box类/ div中添加float:left;即可。

演示：已更新

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

更新： 要将其居中，只需在.ok类/ div上添加一个属性margin:0px auto;。请查看更新后的演示和代码段。

注意： 这会使你的box div文本左对齐，如果您想要将其居中，请在CSS中将.box类添加text-align:center;。

- divy3993

---

工作得非常好，唯一的问题是如果我想让它居中，它就无法正常工作。但是它指引了我正确的方向。 - Snorlax