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的方法來說，各有各的優勢，因此實際情況下需要如何處理完全是按照實際的需要進行選擇。