在经过了IE6 IE7的洗礼之后,我们终于可以放心的使用 inline-block 了,但是在使用 inline-block 的时候,我们总会发现很多莫名其妙的空隙出现在两个 inline-block 元素之间,例如我们的代码如下所示:

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>
nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

然后在浏览器里面的结果就是:

但是一般情况下,我们这么写,总是想让各个元素紧挨在一起的,如果需要中间有空隙,那我们可以通过 css 来更精确地控制。难道这个是一个 bug。刚刚好可以方便的使用这个属性值了,又出现 bug 了,难道又要骂娘了?

其实,了解了背后的原理,就明白这里其实并不是一个 bug,因为对浏览器来说,回车和换行都会被当做有效地字符,只是看不见而已,由于其被当做有效地字符,所以这个空隙的大小会随着定义的文字大小而改变,所以这里也就是为什么我们不需要它的出现,而要自己控制间隙的原因。那么既然知道了产生这个问题的原意,那就有解决方案来应对它。

方法一,可以通过代码来去掉这个inline-block 元素之间的空格。

<nav>
  <a href="#">
    One</a><a href="#">
    Two</a><a href="#">
    Three</a>
</nav>

或者

<nav>
   <a href="#">One</a
  ><a href="#">Two</a
  ><a href="#">Three</a>
</nav>

或者

<nav>
  <a href="#">One</a><!--
  --><a href="#">Two</a><!--
  --><a href="#">Three</a>
</nav>

然后,这就解决了这个问题,主要就是想办法去掉那个换行或者空格。但是这样子的话,会让我的结构很不好看,尤其是对于处女座的前端来说。

方法二:负边距

nav a {
  display: inline-block;
  margin-right: -4px;
}

此时需要给相应的元素以负边距来抵消产生的空隙,但是上面的原因说过了,由于跟其字体大小有关系,所以在具体的情况下,需要更具字体来调整。风险是,万一用户系统中没有你设定的字体呢?

方法三:不写结束标签

<ul>
  <li>one
  <li>two
  <li>three
</ul>

方法四:字体大小 0

由于空隙来源于字符,那我让他为 0 的大小不就行了?对嘛,真聪明。

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

不过,这样的方式,在某些平台以及某些浏览器上是有 bug 的。而且,如果使用 em 作为单位,那么下面的文字再怎么设置都是 0 了(em相对于父级)。

反正,每种方法都不算优雅,但基本都可以解决问题。

但或者,我们有可能根本就不需要 inline-block ,float 如果好用的话。或者以后可以用 flexbox 了。美好的愿望,在国内。

来源于:Fighting the Space Between Inline Block Elements 按自己的理解翻译,未忠实于原文。

6 条评论

  • ichilly 2014/06/21 22:14 回复

    这是不走正路啊

  • 手表说 2015/03/25 15:56 回复

    有两个事情,第一个是标题问题,inline-block你下成了inling-block,第二个是我很苦恼这个空格问题,但一直没有去深究,于是我只用float,没想到竟然看到了这么多方法,哈哈

    • 一米 2015/06/16 16:39 回复

      十分感谢,已修复。

  • 杰克 2015/06/08 23:00 回复

    西安高级前端开发群慰问团前来围观,内容写得不错,围观完毕,再见。

    • 一米 2015/06/16 16:40 回复

      哈哈哈,杰克,你个逗逼。