您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關如何在CSS中去掉inline-block元素的間隙,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據(jù)這篇文章可以有所收獲。
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元素
<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的元素
對于內聯(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 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元素轉換為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:
<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; }
效果圖:
可以看到間隙是由換行或者回車導致的。只要把標簽寫成一行或者標簽直接沒有空格,就不會出現(xiàn)間隙。但是這種方式是不太可靠,存在太多不可控的因素導致失效,例如:代碼生成工具、代碼格式化、或者其他人修改了代碼等等。下面列舉了各種去掉間隙的方法,是否適合需要看具體的應用場景了。
移除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標簽的結束標簽去掉,這樣間隙就沒有了。為了兼容IE6/IE7,最后一個標簽需要閉合。
<div class="demo"> <span>我是一個span <span>我是一個span <span>我是一個span <span>我是一個span</span> </div> .demo span{ background:#ddd; display: inline-block; }
在美團webapp頁面中貌似也是用到了這種方法??梢钥聪拢?/p>
源代碼:
(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; /*要設置相應的字號*/ }
css的基本語法是:1、css規(guī)則由選擇器和一條或多條聲明兩個部分構成;2、選擇器通常是需要改變樣式的HTML元素;3、每條聲明由一個屬性和一個值組成;4、屬性和屬性值被冒號分隔開。
看完上述內容,你們對如何在CSS中去掉inline-block元素的間隙有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。