inline-block元素之间的空白

假设有下面这样一段HTML:

<nav>
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">关于</a>
</nav>

对应的CSS：

nav a{
	padding: 3px 5px;
	color:#fff;
	background:#000;
	display: inline-block;
}

我们可以得到的最终效果是这样的：

inlineblock

但是我们想要把中间的空隙去掉，就像这样：

inlineblocknospace

可以看到每个a之间都有空隙，那么这些空隙是从哪里来的呢？我们不要忘记，在HTML中，除了有元素节点，还有文本节点，而这些空隙就是每个a后面的空白文本节点：

inlineblock1

解决方案

去掉中间的空白文本

可以这样写： 

<nav>
	<a href="#">首页</a><a href="#">文章</a><a href="#">关于</a>
</nav>

或者在中间加上注释来代替空白文本：

<nav>
  <a href="#">首页</a><!--
  --><a href="#">文章</a><!--
  --><a href="#">关于</a>
</nav>

设置字体大小

为了保证HTML的可读性和后期维护性，所以上面的方法其实是完全不可取的,所以我们用另一个方法,HTML没变，加了设置字体的CSS：

nav{
	font-size:0;
}
nav a{
	font-size: 14px;
	padding: 3px 5px;
	color:#fff;
	background:#000;
	display: inline-block;
}

OK,问题得到解决：

inlineblocknospace

结语

其实方法不只这些，比如说还有使用margin的负值、letter-spacing的负值等等，都可以解决，但是我认为都和“去掉中间的空白文本”这个方法差不多，实用性都不高，所以就没介绍。你可能会想到:直接把他们浮动不就行了吗？为何这么麻烦？可是，我们现在讨论的是inline-block，而不是浮动。