Chrome，Safari和Firefox中的内联块元素之间的Ghost空间 [英] Ghost space between inline-block elements in Chrome, Safari and Firefox

问题描述

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

How can I remove the ghost space between inline-block elements?

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

Here is a jsfiddle http://jsfiddle.net/hFDcV/ where you can clearly see a horizontal space between the divs.

StackOverflow规定的示例代码：

And the StackOverflow mandated example code:

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

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

Set the font-size of the parent container to 0 and reset it on the child elements.

#row {
    font-size:0;
}

.box {
    font-size:12pt;
}

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

你可以漂浮框剩下的元素。在行上设置 overflow：hidden; 将阻止它折叠到 0 height。

You can float the box elements left. Setting overflow:hidden; on the row will prevent it from collapsing to 0 height.

#row {
    overflow:hidden;
}

.box {
    float:left;
}

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

There are other solutions in the fantastic article on this problem shared by @RickCalder: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

这篇关于Chrome，Safari和Firefox中的内联块元素之间的Ghost空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！