inline-block清除空隙2-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)服務(wù)項目包括田家庵網(wǎng)站建設(shè)、田家庵網(wǎng)站制作、田家庵網(wǎng)頁制作以及田家庵網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，田家庵網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到田家庵省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

回到頂部
inline-block是什么

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

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

例子1：定義一個內(nèi)聯(lián)元素span為inline-block元素
復(fù)制代碼

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

復(fù)制代碼

效果圖：

回到頂部
inline-block兼容性
（1）inline level的元素

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

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

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

例子2：
復(fù)制代碼

<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; /觸發(fā)hasLayout/
}

復(fù)制代碼

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的元素之后有個inline level轉(zhuǎn)換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間不出現(xiàn)間隙；緊跟inline level轉(zhuǎn)換為inline-block的元素之后有個block level轉(zhuǎn)換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間出現(xiàn)間隙；其它瀏覽器任何情況下均出現(xiàn)間隙；
回到頂部
inline-block元素間隙由來

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

例子3：
復(fù)制代碼

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

.demo span{
background:#ddd;
}

復(fù)制代碼

效果圖：

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

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

復(fù)制代碼

效果圖：

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

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

*寫法一：

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

*寫法二：
復(fù)制代碼

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

復(fù)制代碼

*寫法三：利用HTML注釋標(biāo)簽
復(fù)制代碼

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

復(fù)制代碼
（2）取消標(biāo)簽閉合
復(fù)制代碼

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

.demo span{
background:#ddd;
display: inline-block;
}
復(fù)制代碼

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

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

復(fù)制代碼

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

源代碼：

（3）使用font-size:0;

在父容器上使用font-size:0;可以消除間隙，可以這樣寫:
復(fù)制代碼

<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; /要設(shè)置相應(yīng)的字號/
}

復(fù)制代碼

對于Chrome, 其默認(rèn)有最小字體大小限制，考慮到兼容性，需要取消字體大小限制，這樣寫：
復(fù)制代碼

<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; /要設(shè)置相應(yīng)的字號/
}

復(fù)制代碼

回到頂部
總結(jié)

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：inline-block清除空隙2-創(chuàng)新互聯(lián)
本文路徑：http://muchs.cn/article4/ceejie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、建站公司、品牌網(wǎng)站制作、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管