Html Chrome、Safari和Firefox中内联块元素之间的重影空间

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

这里是一个jsfiddle，您可以清楚地看到div之间的水平空间

和示例代码：

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

某物
某物
某物
某物
#划船{
背景色：红色；
}
.盒子{
宽度：150px；
高度：150像素；
背景颜色：黄色；
显示：内联块；
保证金：0；
填充：0；
}

​

一种解决方案：

将父容器的字体大小设置为

0

，并在子元素上重置它

#row {
    font-size:0;
}

.box {
    font-size:12pt;
}

另一个解决方案：

您可以将

框

元素向左浮动。设置

溢出：隐藏行上的code>将防止其折叠到
0
高度

#row {
    overflow:hidden;
}

.box {
    float:left;
}

@RickCalder分享的关于这个问题的精彩文章中还有其他解决方案：
实现这一点的一个简单方法是在内联块元素之间插入注释

像这样：

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


某物某物某物某物某物某物某物

希望这对别人有帮助
 这些元素之间的空白正在渲染。我确信有一个干净的方法来解决这个问题，但我必须做一些测试来解决这个问题

到

.box

类将字体大小设置为0有效。清除这些空间也可以@stuartrexking是的，这就是我发现问题的原因，但通常不希望以这种方式破坏HTML。我不喜欢这种代码，我认为它很难看。我同意，但我真的不想为函数编写注释。我认为这是一个错误的铬。