今天就跟大家聊聊有關(guān)如何在CSS中去掉inline-block元素的間隙，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)道縣,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

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）可以當做一個塊級元素來設(shè)置各種的屬性，例如：width、height、padding等。

例子1：定義一個內(nèi)聯(lián)元素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的元素

對于內(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：

<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*/
}

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：

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

.demo span{
     background:#ddd;
}

效果圖：

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

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

效果圖：

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

移除inline-block元素間隙方法

（1）移除標簽間的空格

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

*寫法一：

<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標簽的結(jié)束標簽去掉，這樣間隙就沒有了。為了兼容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; /*要設(shè)置相應(yīng)的字號*/
    }

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

css的基本語法是什么

css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

看完上述內(nèi)容，你們對如何在CSS中去掉inline-block元素的間隙有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當前名稱：如何在CSS中去掉inline-block元素的間隙
文章地址：http://chinadenli.net/article38/pgjepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、軟件開發(fā)、服務(wù)器托管、網(wǎng)站制作、響應(yīng)式網(wǎng)站、標簽優(yōu)化

廣告

聲明：本網(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)