Chrome、Safari 和 Firefox 中内联块元素之间的幽灵空间 [重复]

如何删除内联块元素之间的幽灵空间？

这是一个jsfiddlehttp://jsfiddle.net/hFDcV/ http://jsfiddle.net/hFDcV/您可以清楚地看到 div 之间的水平空间。

StackOverflow 强制示例代码：

<div id='row'>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
</div>

#row {
  background-color: red;
}

.box {
  width: 150px;
  height: 150px;
  background-color: yellow;
  display: inline-block;
  margin: 0;
  padding:0;
}

​

一种解决方案：http://jsfiddle.net/hFDcV/4/ http://jsfiddle.net/hFDcV/4/

将父容器的字体大小设置为0并在子元素上重置它。

#row {
    font-size:0;
}

.box {
    font-size:12pt;
}

另一个解决方案：http://jsfiddle.net/hFDcV/10/ http://jsfiddle.net/hFDcV/10/

你可以浮动box剩下的元素。环境overflow:hidden; on the row将防止它塌陷0 height.

#row {
    overflow:hidden;
}

.box {
    float:left;
}

@RickCalder 分享的有关此问题的精彩文章中还有其他解决方案：http://css-tricks.com/fighting-the-space- Between-inline-block-elements/ http://css-tricks.com/fighting-the-space-between-inline-block-elements/