html - Chrome、Safari 和 Firefox 中的行内块元素之间的幽灵空间

Question

如何删除行内块元素之间的重影空间？

这是一个 jsfiddle 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;
}

​</p>

Answer 1

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

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

#row {
    font-size:0;
}

.box {
    font-size:12pt;
}

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

您可以向左浮动box元素。设置overflow:hidden;将row防止它塌陷到0高度。

#row {
    overflow:hidden;
}

.box {
    float:left;
}

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

Answer 2

实现这一点的一种简单方法是在行内块元素之间插入注释！

像这样 ：

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

希望这对某人有帮助！