最近做移動端頁面時，經常會用到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; /*要設置相應的字號*/ }以上是在工作上遇到一些問題的知識總結，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
