inline block元素的空隙與解決方法

2022-07-24 07:00:14 字數 1096 閱讀 1264

多次遇到了使用inline-block後留下間隙的問題,所以記錄一下,以提醒自己以後留意這點。

現象描述:

使用display:inlie-block後和一些行內元素都有此現象如:

等標籤元素

那沒我們該如何解決呢?方法是很多的。可以參考大神的解決方法: 。以下方法是我對此部落格的提煉。

方法一間隙產生的原因是html的換行空格,所以可以直接取消換行即可。但是這樣是降低**的可讀性,另外可以用注釋來佔位

方法二設定margin為負值,margin負值的大小與上下文的字型和文字大小相關。貌似計算值有點麻煩,且未知外部環境,故不適合大規模使用。

方法三好奇怪的方法,不過真的可以。

<

div

class

="space"

>

<

p>

<

p>

<

p>

p>

div>

方法四在父元素設定font-size:0, 新的chrome也可以完美解決,容易造成字型大小混亂,謹慎使用。

元素下可以使用

方法五使用letter-spacing,字元間距,負值設定過大文字重疊或被遮擋。

方法六使用word-spacing,單詞間距,chrome下負值設定過大會使寬高縮小。

更多方法可以檢視:。其中博主的方法八我沒看懂,故不作記錄。

去除inline block元素間距

現象 當使用inline block的時候,元素間會出現4px的間距 在chrome裡面 是8px 如下圖 原因 元素間留白間距出現的原因就是標籤段之間的空格 解決方法一 既然間距是因為標籤間的空格造成的,那麼消除空格就可以消除間距,但是這一類方法都不符合常規的 書寫習慣,所以 不推薦春天 夏天秋天...

去掉inline block元素間隙

目錄 1 標籤寫在一行,移除標籤間的空格 2 利用html注釋標籤 3 在父容器上使用font size 0 可以消除間隙 做頁面時,如果用到inline block元素來布局,就無可避免都會遇到乙個問題,就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題,需要把間隙去掉。我...

inline block元素間隙處理

要使多個塊級元素並行顯示,可使用float或者inline block進行處理 使用inline block會出現元素之間的間隙 div class demo p 我是乙個span p p 我是乙個span p p 我是乙個span p p 我是乙個span p div demo span 如圖 間...