inline-block元素间的间隙问题

在我们使用inline-block时会发现元素间存在间隙，如下例所示

<nav>
      <a href="#">one</a>
      <a href="#">one</a>
      <a href="#">one</a>
</nav>

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

                                                                     

上面代码的效果如上图所示，我们可以清晰地看到链接之间的白色空隙，而这是为什么呢？

这个应该不是“bug”，因为对于这种行内元素的设置来说，更像是单词与单词之间的空隙一样，默认会有行内元素之间的空隙。

解决这个问题的方式有以下几种。

1、去除空格

在元素与元素之间，通常我们会将换行符或tab符作为一个空格看待，去除这些当作空格的元素即可解决问题

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

2、负margin

可以为inline-block的元素设置负margin值，一般为-4，但是根据父级元素的font-size会有相应的变化，使得元素间隙消失

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

这个方法对于盒模型比较怪异的IE6/7来说另当别论。

3、省略闭合符号

<nav>
      <li>one
      <li>two
      <li>three
</nav>

4、设置父元素的font-size为0

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

当然，如果用浮动来代替inline-block的效果的话，也是可以避免这一问题，只是对于浮动和inline-block的方法来说，各有各的优势，因此实际情况下需要如何处理完全是按照实际的需要进行选择。