有三個i標簽，中間一個放文字，前后兩個放的是iconfont

效果圖如下：

會發現三個i標簽渲染出來之后中間會有挺大的空隙：

嘗試設置邊距為0無果：

解決方法：

方法一：（不推薦）

去掉三個i標簽前后的空格（換行也不行），讓它們連著寫

的確有效果，但是這樣代碼太亂，看著難受；

方法二：

①將父元素font-size設置為0；

②在子元素（i）那里設置字體；

如果是span標簽之間出現空隙，也可以用此方法解決。

update:

在實現如下圖所示布局的時候，ul寬100%,li寬20%,inline-block并且沒有左右內（外）邊距，但是最后一個li還是被擠到了下一行

審查元素發現兩個li之間其實是有一點空隙的（通過像素大廚測量大概是3px，通過查閱資料發現其實是4px），

解決方法：

①可以通過彈性布局display:flex來解決（默認會排列在一行，還要加一個flex-wrap:wrap讓超出部分顯示在下一行）

②給li設置float:left也可以解決

③同樣地，ul的font-size設為0，li里面再具體設相應字體大小

④最直接但也是最不推薦的方法：li之間不換行也不要有空格

?

其實不僅是i和span，li甚至兩張圖片間出現縫隙的問題都可以用方法③解決。

上面提到的情況其實有共性：

①是內聯元素或者內聯塊

②是其他元素的子元素

那么出現這個問題的原因是什么呢？？

這是因為內聯或者內聯塊是同行顯示的，而為了代碼的整潔和可讀性，通常會在li標簽之間換行；HTML默認將多個空格顯示為一個，這就是為什么兩個li之間（準確地說是內聯或內聯塊元素之間）會默認有一點間距。

原因知道了，解決的思路也就變成：怎么去掉這些空格；

除了上面提到的方法，其實還有很多可以去掉間隙的方式，如加注釋等，具體的可以看看這個：

?https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements/5078297#5078297

?

?

?

?

總結

以上是生活随笔為你收集整理的两个span标签(或i标签)之间有间隙的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。