如何在CSS中去掉inline-block元素的間隙
今天就跟大家聊聊有關如何在CSS中去掉inline-block元素的間隙，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)主要從事做網站、網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務道縣,10多年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220
inline-block是什么
inline-block 即內聯(lián)塊,在CSS的元素分類中可以分成三種：行內元素或者內聯(lián)元素、塊級元素、以及內聯(lián)塊元素。
內聯(lián)塊元素具有了內聯(lián)元素以及塊級元素的特性：（1）元素之間可以水平排列 （2）可以當做一個塊級元素來設置各種的屬性，例如：width、height、padding等。
例子1：定義一個內聯(lián)元素span為inline-block元素
我是一個span
我是一個span
我是一個span
我是一個span
#demo span{
display:inline-block;
background:#ddd;
}
效果圖：
inline-block兼容性
（1）inline level的元素
對于內聯(lián)元素(inline element)，所有主流瀏覽器都支持直接設置display的value值為inline-block來將其定義為內聯(lián)塊。
（2）block level的元素
IE7及以下瀏覽器對塊級元素(block element)的支持并不完全，它們只支持用display:inline-block去定義一個inline level的元素為內聯(lián)塊。
由于IE7及以下瀏覽器支持直接將inline level元素設置為內聯(lián)塊，所以我們可以變通實現(xiàn)，先將block level元素設置為inline，然后再去觸發(fā)該元素的hasLayout，使其擁有和inline-block相似的特性?？梢赃@樣寫：
例子2：
我是一個div
我是一個div
我是一個div
我是一個div
#demo div{
display:inline-block;
*display:inline; /*IE7 hack*/
*zoom:1; /*觸發(fā)hasLayout*/
}
IE7及以下瀏覽器：block level元素轉換為inline-block，在IE7及以下瀏覽器下元素間不出現(xiàn)間隙；inline level元素轉換為inline-block，在IE7及以下瀏覽器下元素間出現(xiàn)間隙；緊跟block level轉換為inline-block的元素之后有個inline level轉換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間不出現(xiàn)間隙；緊跟inline level轉換為inline-block的元素之后有個block level轉換為inline-block的元素，在IE7及以下瀏覽器下這倆元素間出現(xiàn)間隙；其它瀏覽器任何情況下均出現(xiàn)間隙；
inline-block元素間隙由來
在例子1中，定義為inline-block元素會產生間隙，如果不設置display:inline-block，會是什么效果？如下：
例子3：
我是一個span
我是一個span
我是一個span
我是一個span
.demo span{
background:#ddd;
}可以看到間隙是由換行或者回車導致的。只要把標簽寫成一行或者標簽直接沒有空格，就不會出現(xiàn)間隙。但是這種方式是不太可靠，存在太多不可控的因素導致失效，例如：代碼生成工具、代碼格式化、或者其他人修改了代碼等等。下面列舉了各種去掉間隙的方法，是否適合需要看具體的應用場景了。
css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
看完上述內容，你們對如何在CSS中去掉inline-block元素的間隙有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
重慶分公司
重慶分公司
