一、內聯元素空隙問題

　　當我們使用"display:inline-block"把塊集元素轉換為內聯元素時，會發現每兩個內聯元素之間有一定的空隙，既不是margin也不是padding，最終發現是由于換行符、制表符（tab）、空格等字符引起的。

　　元素被當成行內元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，根據white-space的處理方式（默認是normal，合并多余空白），原來HTML代碼中的回車換行被轉成一個空白符，所以元素之間就出現了空隙。這些元素之間的間距會隨著字體的大小而變化，當行內元素font-size:16px時，間距為8px。

　　從節點（node）的角度說，這個問題產生的真正原因是：當我們換行時，會產生一個文本節點，這個文本節點的內容是換行

　　常見的節點以及節點類型值

元素節點 　　Node.ELEMENT_NODE(1) 屬性節點 　　Node.ATTRIBUTE_NODE(2) 文本節點 　　Node.TEXT_NODE(3)

二、總結一下解決方案：

　　1、既然是由于行符、制表符（tab）、空格等字符引起，那么一種方法就是去掉內聯元素之間的換行符、制表符（tab）、空格

　　比如：（1）用HTML注釋代替換行

<div><span>內聯元素</span><!-- --><span>內聯元素</span> </div>

　　（2）元素開始標簽緊跟結尾標簽

<li> one</li><li>two</li><li> three</li> <li>one</li ><li>two</li ><li>three</li>

　　缺點：這樣代碼很難看

　　2、在父元素中設置font-size: 0，然后在子元素上重置正確的font-size。

　　缺點：inline-block元素必須設定字體，不然行內元素中的字體不不顯示。

　　3、為inline-block元素添加樣式float:left，加了浮動的內聯元素是不會有這個空隙的。

　　4、使用margin-right負值

　　缺點：元素之間間距的大小與上下文字體大小相關；并且同一大小的字體，元素之間的間距在不同瀏覽器下是不一樣的，如：font-size:16px時，Chrome下元素之間的間距為8px，而Firefox下元素之間的間距為4px。所以不同瀏覽器下margin-right的負值是不一樣的，因此這個方法不通用。

　　注意：當marigin-right使用相對單位em來表示時，Chrome下可以正常去除間距，而Firefox下元素之間有重疊。

　　其中IE6/7下始終存在1px的空隙，需要使用word-spacing減少單詞間的空白（即字間隔）?word-spacing:-1px;

　　5、使用display:table和word-spacing（最優的方法）

.box{display:table; /* 調教webkit*/word-spacing:-1em;/*其他瀏覽器*/ }

　　6、設置字間距或者字符間距

　　在父容器的樣式中改變“word-spacing”或者“letter-spacing”為負值，一般為-5也就好的。這種辦法也會消除空隙，但是還是會產生文本節點。這里要注意的是改變間距會影響后面所有的字體，所有在后面要修改回來。

?

轉載于:https://www.cnblogs.com/goloving/p/8525964.html

總結

以上是生活随笔為你收集整理的内联元素空隙问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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