干掉行内块级元素之间的空隙

少于 1 分钟阅读

经过再寻常不过的方式格式化的多个行内块级元素之间会出现空隙

换句话说：

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

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

将得到以下结果：

space-between-inline-block-elements

我们总是希望多个元素紧挨着彼此。对于导航来说，这就意味着难以处理的一丁点不可以点击的空隙。

这不是 BUG 哟（我认为不是）。这就是把行内块级元素放到一行将会自然发生的事情。你希望有意输入的单词之间的空格才产生空隙对吗？这些块级元素之间的空隙就像单词之间的空格一样。并不是说浏览器规范不能更新为行内块级元素之间的空格应该什么都有没有，我敢肯定这就像太阳打西边出来一样不可能会发生的。

这里有一些方式可以干掉这些空隙然后让行内块级元素紧挨着彼此。

移除空隙

产生空隙的原因恰恰就是因为行内块级元素之间有空白符（一个换行符和几个以空格代表的制表符，我想说清楚）。压缩 HTML 可能可以解决这些问题，或者采用以下技巧：

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

或者

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

或者加上注释

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

以上方法都有些独特，但它确实起作用。

可以使用负的 4px 外边距方式偷偷地干掉元素之间的空隙（具体大小可能需要根据父元素的字体大小做适当调整）。显然在老版本 IE(6 & 7) 中这仍然是有问题的，但如果你根本不关心这些浏览器的话你就可以保持 HTML 代码格式化的整洁。

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

HTML5 不在意关闭标签。尽管你不得不承认，这感觉很奇怪。

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

空隙的字体大小为 0 的话，宽度也为 0

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

可能你根本不需要行内块级元素，你可以使用浮动的方式解决这个问题。这样也允许你设置他们的宽度、高度、内边框和其他块级元素属性。但同时你也不能通过给行内块级元素的父级设置 text-align: center; 的方式让它们居中。

如果浏览器支持对你来说是可接受的，并且你需要的是行内块级元素居中，你可以使用弹性盒子(flexbox). 它们不是完全可以互换的布局模型或其他任何东西，但你可能会从中得到你需要的东西

示例 on CodePen

本文译自 Fighting the Space Between Inline Block Elements