解決標籤間的間隙問題 font size 0

2021-08-19 07:08:41 字數 801 閱讀 3993

設定css如下:

表面上看應該是出於同一行,沒什麼問題,但是效果其實是下面這樣的:

我們為了頁面**的整潔可讀性,往往會設定一些適當的縮排、換行,但當元素的display為inline或者inline-block的時候,這些縮排、換行就會產生空白,所以出現上述問題。雖然還有其他方法能解決我們因為縮排、換行而產生的問題,但此時,最合適的方法就是給li的父級ul設定:font-size: 0;給li設定:font-size: 16px;如此就達到了所需效果。

其實的間隙問題也是因為我們的換行、縮排。

給這個div設定

div
之間的間隙就沒有了: 

但是font-size有繼承性,在父元素設定了font-size子元素的所有元素都受到其影響!不過對照其他方案,這種方案又是最好的! 

去掉inline block間的間隙

當給多個相鄰元素設定display inline block時,元素之間缺省會產生間隙 width 202px height 202px margin 30px auto border 1px solid rgba 0,0,0,3 item 效果如圖,產生間隙。一種思路是在html中手動刪掉div之...

解決img object 標籤上下出現間隙的方法

這篇文章主要給大家介紹了解決img標籤上下出現間隙的方法,因為最近在工作中遇到了這個問題,所以想著記錄下來。方便自己或者有需要的朋友們參考借鑑,下面來一起看看吧。我們在平常的開發過程中,經常需要使用多張,而使用多張的時候,我們一般會去使用乙個列表來對我們的img 進行承裝。document 但是這個...

解決img標籤上下出現間隙的方法

與父元素下邊緣有 2px 的間隙,並不是因為空格。多個 inline block 元素之間的間隙才是因為空格。任何不是塊級元素的可見元素都是內聯元素,其表現的特性是 行布局 形式。css權威指南 如文字等內聯元素,它預設對齊方式都是和它的父級的 baseline 去進行對齊的,但是你對齊的是 bas...