最近做移動(dòng)端頁(yè)面時(shí)，經(jīng)常會(huì)用到inline-block元素來(lái)布局，但無(wú)可避免都會(huì)遇到一個(gè)問(wèn)題，就是inline-block元素之間的間隙。這些間隙會(huì)導(dǎo)致一些布局上的問(wèn)題，需要把間隙去掉。對(duì)于inline-block元素及去掉間隙的方法，在這里做一個(gè)簡(jiǎn)單的總結(jié)。 回到頂部

inline-block是什么

?inline-block 即內(nèi)聯(lián)塊,在CSS的元素分類(lèi)中可以分成三種：行內(nèi)元素或者內(nèi)聯(lián)元素、塊級(jí)元素、以及內(nèi)聯(lián)塊元素。

內(nèi)聯(lián)塊元素具有了內(nèi)聯(lián)元素以及塊級(jí)元素的特性：（1）元素之間可以水平排列 （2）可以當(dāng)做一個(gè)塊級(jí)元素來(lái)設(shè)置各種的屬性，例如：width、height、padding等。

例子1：定義一個(gè)內(nèi)聯(lián)元素span為inline-block元素

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

效果圖：

回到頂部

inline-block兼容性

（1）inline level的元素

?對(duì)于內(nèi)聯(lián)元素(inline element)，所有主流瀏覽器都支持直接設(shè)置display?的value值為inline-block來(lái)將其定義為內(nèi)聯(lián)塊。

（2）block level的元素

IE7及以下瀏覽器對(duì)塊級(jí)元素(block element)的支持并不完全，它們只支持用display:inline-block去定義一個(gè)inline level的元素為內(nèi)聯(lián)塊。

由于IE7及以下瀏覽器支持直接將inline level元素設(shè)置為內(nèi)聯(lián)塊，所以我們可以變通實(shí)現(xiàn)，先將block level元素設(shè)置為inline，然后再去觸發(fā)該元素的hasLayout，使其擁有和inline-block相似的特性。可以這樣寫(xiě)：

例子2：

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

?IE7及以下瀏覽器：block level元素轉(zhuǎn)換為inline-block，在IE7及以下瀏覽器下元素間不出現(xiàn)間隙；inline level元素轉(zhuǎn)換為inline-block，在IE7及以下瀏覽器下元素間出現(xiàn)間隙；緊跟block level轉(zhuǎn)換為inline-block的元素之后有個(gè)inline level轉(zhuǎn)換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間不出現(xiàn)間隙；緊跟inline level轉(zhuǎn)換為inline-block的元素之后有個(gè)block level轉(zhuǎn)換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間出現(xiàn)間隙；其它瀏覽器任何情況下均出現(xiàn)間隙；

回到頂部

inline-block元素間隙由來(lái)

?在例子1中，定義為inline-block元素會(huì)產(chǎn)生間隙，如果不設(shè)置display:inline-block，會(huì)是什么效果？如下：

例子3：

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

效果圖：

上面例子中，對(duì)span不做任何處理依然存在空隙，這到底是什么原因，是否是結(jié)構(gòu)上的問(wèn)題。假如將span標(biāo)簽都寫(xiě)成一行，又是怎樣的效果，來(lái)看一下：

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

效果圖：

可以看到間隙是由換行或者回車(chē)導(dǎo)致的。只要把標(biāo)簽寫(xiě)成一行或者標(biāo)簽直接沒(méi)有空格，就不會(huì)出現(xiàn)間隙。但是這種方式是不太可靠，存在太多不可控的因素導(dǎo)致失效，例如：代碼生成工具、代碼格式化、或者其他人修改了代碼等等。下面列舉了各種去掉間隙的方法，是否適合需要看具體的應(yīng)用場(chǎng)景了。

回到頂部

移除inline-block元素間隙方法

（1）移除標(biāo)簽間的空格

元素間的間隙出現(xiàn)的原因是元素標(biāo)簽之間的空格，把空格去掉間隙自然就會(huì)消失。來(lái)看以下幾種寫(xiě)法：

*寫(xiě)法一：

<div class="demo"><span>我是一個(gè)span</span><span>我是一個(gè)span</span><span>我是一個(gè)span</span><span>我是一個(gè)span</span></div>

*寫(xiě)法二：

<div class="demo"><span>我是一個(gè)span</span><span>我是一個(gè)span</span><span>我是一個(gè)span</span><span>我是一個(gè)span</span></div>

?*寫(xiě)法三：利用HTML注釋標(biāo)簽

<div class="demo"><span>我是一個(gè)span</span><!-- --><span>我是一個(gè)span</span><!-- --><span>我是一個(gè)span</span><!-- --><span>我是一個(gè)span</span></div>

（2）取消標(biāo)簽閉合

<div class="demo"><span>我是一個(gè)span<span>我是一個(gè)span<span>我是一個(gè)span<span>我是一個(gè)span</div>

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

把span標(biāo)簽的結(jié)束標(biāo)簽去掉，這樣間隙就沒(méi)有了。為了兼容IE6/IE7，最后一個(gè)標(biāo)簽需要閉合。

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

在美團(tuán)webapp頁(yè)面中貌似也是用到了這種方法。可以看下：

源代碼：

?

?

（3）使用font-size:0;

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

<div class="demo"><span>我是一個(gè)span<span>我是一個(gè)span<span>我是一個(gè)span<span>我是一個(gè)span</span></div>.demo {font-size: 0;}.demo span{background:#ddd;display: inline-block;font-size: 14px; /*要設(shè)置相應(yīng)的字號(hào)*/}

?對(duì)于Chrome, 其默認(rèn)有最小字體大小限制，考慮到兼容性，需要取消字體大小限制，這樣寫(xiě)：

<div class="demo"><span>我是一個(gè)span<span>我是一個(gè)span<span>我是一個(gè)span<span>我是一個(gè)span</span></div>.demo {font-size: 0;-webkit-text-size-adjust:none;}.demo span{background:#ddd;display: inline-block;font-size: 14px; /*要設(shè)置相應(yīng)的字號(hào)*/}

?

回到頂部

總結(jié)

在移動(dòng)端的頁(yè)面中，個(gè)人傾向于設(shè)置font-size:0這種方法來(lái)清除掉。對(duì)于PC端上，可以參考doyoe的全瀏覽器兼容方案。

以上是在工作上遇到一些問(wèn)題的知識(shí)總結(jié)，不足之處，歡迎指正。

總結(jié)

以上是生活随笔為你收集整理的inline-block清除空隙2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。