內聯元素inline-block空隙問題

1.產生的緣由

當咱們使用"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)

2.解決辦法

第一種，不換行

既然是換行產生的，那麼咱們不換行就是了。因此第一種辦法就是把全部的代碼都寫到一行，便不會產生空隙了。

<span>xxxx</span><b>xxxxx</b>

缺點：若是代碼太多，寫到一行會影響程序可讀性，很差看嘛。因此第一辦法也不是很可行。

第二種，改變字體大小(推薦）

這個換行是字符吧，那麼咱們把字體大小改成0，他便不會產生了。

設置其父容器的font-size爲0，再設置內聯元素的字體大小。

缺點：有時候會影響後面的字體，若是你後面忘記把字體變回來的話，那就尷尬了。

這種辦法仍是會產生文本節點。

第三種 添加註釋

在上一個標籤尾部和下一個標籤頭部添加註釋。

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

缺點：這種辦法不會產生空隙，但會產生一個註釋節點。

第四種 設置「margin-right」

在CSS中設置margin-left爲賦值，通常爲-5就能夠了。這個辦法是使用距左爲負值把空隙覆蓋掉，但會產生一個文本節點。

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

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

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

第五種 設置字間距或者字符間距

在父容器的樣式中改變「word-spacing」或者「letter-spacing」爲負值，通常爲-5也就好的。

這種辦法也會消除空隙，可是仍是會產生文本節點。這裏要注意的是改變間距會影響後面全部的字體，全部在後面要修改回來。

第六種 使用浮點形式(推薦）

既然使用"display:inline-block"會產生空隙，那麼咱們不使用他，使用「float:left」就不會產生空隙了。

這種辦法也會產生空隙，可是空隙會被掩蓋掉。使用這種辦法後，下一個元素必定要清除浮點帶來的影響。

第七種 使用display:table和word-spacing

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