inline-block元素間的間隙問題，inline-block間隙

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