有三個(gè)i標(biāo)簽，中間一個(gè)放文字，前后兩個(gè)放的是iconfont

效果圖如下：

會(huì)發(fā)現(xiàn)三個(gè)i標(biāo)簽渲染出來(lái)之后中間會(huì)有挺大的空隙：

嘗試設(shè)置邊距為0無(wú)果：

解決方法：

方法一：（不推薦）

去掉三個(gè)i標(biāo)簽前后的空格（換行也不行），讓它們連著寫

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

方法二：

①將父元素font-size設(shè)置為0；

②在子元素（i）那里設(shè)置字體；

如果是span標(biāo)簽之間出現(xiàn)空隙，也可以用此方法解決。

update:

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

審查元素發(fā)現(xiàn)兩個(gè)li之間其實(shí)是有一點(diǎn)空隙的（通過像素大廚測(cè)量大概是3px，通過查閱資料發(fā)現(xiàn)其實(shí)是4px），

解決方法：

①可以通過彈性布局display:flex來(lái)解決（默認(rèn)會(huì)排列在一行，還要加一個(gè)flex-wrap:wrap讓超出部分顯示在下一行）

②給li設(shè)置float:left也可以解決

③同樣地，ul的font-size設(shè)為0，li里面再具體設(shè)相應(yīng)字體大小

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

?

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

上面提到的情況其實(shí)有共性：

①是內(nèi)聯(lián)元素或者內(nèi)聯(lián)塊

②是其他元素的子元素

那么出現(xiàn)這個(gè)問題的原因是什么呢？？

這是因?yàn)閮?nèi)聯(lián)或者內(nèi)聯(lián)塊是同行顯示的，而為了代碼的整潔和可讀性，通常會(huì)在li標(biāo)簽之間換行；HTML默認(rèn)將多個(gè)空格顯示為一個(gè)，這就是為什么兩個(gè)li之間（準(zhǔn)確地說(shuō)是內(nèi)聯(lián)或內(nèi)聯(lián)塊元素之間）會(huì)默認(rèn)有一點(diǎn)間距。

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

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

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

?

?

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。