CSS 去掉inline-block間隙的幾種方法，cssinline-block

CSS 去掉inline-block間隙的幾種方法，cssinline-block

      最近做移動端頁面時，經常會用到inline-block元素來布局，但無可避免都會遇到一個問題，就是inline-block元素之間的間隙。這些間隙會導致一些布局上的問題，需要把間隙去掉。對於inline-block元素及去掉間隙的方法，在這裡做一個簡單的總結。

 inline-block是什麼

 inline-block 即內聯塊,在CSS的元素分類中可以分成三種：行內元素或者內嵌元素、區塊層級元素、以及內聯塊元素。

內聯塊元素具有了內嵌元素以及區塊層級元素的特性：（1）元素之間可以水平排列 （2）可以當做一個區塊層級元素來設定各種的屬性，例如：width、height、padding等。

例子1：定義一個內嵌元素span為inline-block元素

<div id="demo">    <span>我是一個span</span>    <span>我是一個span</span>    <span>我是一個span</span>    <span>我是一個span</span></div>#demo span{    display:inline-block;
　　 background:#ddd;
}

：

inline-block相容性（1）inline level的元素

 對於內嵌元素(inline element)，所有主流瀏覽器都支援直接設定display 的value值為inline-block來將其定義為內聯塊。

（2）block level的元素

IE7及以下瀏覽器對區塊層級元素(block element)的支援並不完全，它們只支援用display:inline-block去定義一個inline level的元素為內聯塊。

由於IE7及以下瀏覽器支援直接將inline level元素設定為內聯塊，所以我們可以變通實現，先將block level元素設定為inline，然後再去觸發該元素的hasLayout，使其擁有和inline-block相似的特性。可以這樣寫：

例子2：

<div id="demo">    <div>我是一個div</div>    <div>我是一個div</div>    <div>我是一個div</div>    <div>我是一個div</div></div>#demo div{    display:inline-block;    *display:inline; /*IE7 hack*/    *zoom:1; /*觸發hasLayout*/}

 IE7及以下瀏覽器：block level元素轉換為inline-block，在IE7及以下瀏覽器下元素間不出現間隙；inline level元素轉換為inline-block，在IE7及以下瀏覽器下元素間出現間隙；緊跟block level轉換為inline-block的元素之後有個inline level轉換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間不出現間隙；緊跟inline level轉換為inline-block的元素之後有個block level轉換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間出現間隙；其它瀏覽器任何情況下均出現間隙；

inline-block元素間隙由來

 在例子1中，定義為inline-block元素會產生間隙，如果不設定display:inline-block，會是什麼效果？如下：

例子3：

<div class="demo">        <span>我是一個span</span>        <span>我是一個span</span>        <span>我是一個span</span>        <span>我是一個span</span></div>.demo span{     background:#ddd;}

：

上面例子中，對span不做任何處理依然存在空隙，這到底是什麼原因，是否是結構上的問題。假如將span標籤都寫成一行，又是怎樣的效果，來看一下：

<div class="demo">        <span>我是一個span</span><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span>    </div>.demo span{         background:#ddd;}

：

可以看到間隙是由換行或者斷行符號導致的。只要把標籤寫成一行或者標籤直接沒有空格，就不會出現間隙。但是這種方式是不太可靠，存在太多不可控的因素導致失效，例如：代碼產生工具、代碼格式化、或者其他人修改了代碼等等。下面列舉了各種去掉間隙的方法，是否適合需要看具體的應用情境了。

移除inline-block元素間隙方法（1）移除標籤間的空格

元素間的間隙出現的原因是元素標籤之間的空格，把空格去掉間隙自然就會消失。來看以下幾種寫法：

*寫法一：

<div class="demo">        <span>我是一個span</span><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span>    </div>

*寫法二：

<div class="demo">        <span>我是一個span        </span><span>我是一個span        </span><span>我是一個span        </span><span>我是一個span</span>    </div>

 *寫法三：利用HTML注釋標籤

<div class="demo">        <span>我是一個span</span><!--         --><span>我是一個span</span><!--         --><span>我是一個span</span><!--         --><span>我是一個span</span>    </div>

（2）取消標籤閉合

<div class="demo">        <span>我是一個span        <span>我是一個span        <span>我是一個span        <span>我是一個span    </div>

.demo span{
background:#ddd;
display: inline-block;
}

把span標籤的結束標籤去掉，這樣間隙就沒有了。為了相容IE6/IE7，最後一個標籤需要閉合。

<div class="demo">        <span>我是一個span        <span>我是一個span        <span>我是一個span        <span>我是一個span</span>    </div>.demo span{         background:#ddd;         display: inline-block;        }

在美團webapp頁面中貌似也是用到了這種方法。可以看下：

原始碼：

 

 

（3）使用font-size:0;

 在父容器上使用font-size:0;可以消除間隙，可以這樣寫:

<div class="demo">        <span>我是一個span        <span>我是一個span        <span>我是一個span        <span>我是一個span</span>    </div>    .demo {font-size: 0;}    .demo span{         background:#ddd;         display: inline-block;         font-size: 14px; /*要設定相應的字型大小*/    }

 對於Chrome, 其預設有最小字型大小限制，考慮到相容性，需要取消字型大小限制，這樣寫：

<div class="demo">        <span>我是一個span        <span>我是一個span        <span>我是一個span        <span>我是一個span</span>    </div>    .demo {font-size: 0;-webkit-text-size-adjust:none;}    .demo span{         background:#ddd;         display: inline-block;         font-size: 14px; /*要設定相應的字型大小*/    }

 

總結

在移動端的頁面中，個人傾向於設定font-size:0這種方法來清除掉。對於PC端上，可以參考doyoe的全瀏覽器安全色方案。

以上是在小弟在工作上遇到一些問題的知識總結，不足之處，歡迎指正。

 

更多閱讀：

去除inline-block元素間間距的N種方法;

如何解決inline-block元素的空白間距

應不應該使用inline-block代替float