inline-block 元素之間的空白問題

1、遇到的問題

前些天寫瀑布流佈局的時候，發現明明計算好了寬度使得一行能放下三張圖片，實際效果卻老是放不下，圖片會擠到下一行去。上圖：

能夠看到，我原本是想要兩行圖片，每一行是三張。結果如今第一行的圖片跑到第二行去了。
代碼結構很簡單：

<li>
 <a></a>
 <a></a>
 <a></a>
</li>
<li>
 <a></a>
 <a></a>
 <a></a>
</li>
其中a標籤設置了display：inline-block

即便給a標籤設置了padding：0；margin：0；圖片之間仍然有小間隙。
而後忽然想到當初學習佈局的時候，看過某大神提過空白的問題，結果由於沒有實踐，因此就忘了這碼事了。

2、舉個簡單的栗子分析問題

<div style="border:1px red solid">
<a style="background-color:pink;display:inline-block;width:20%;">1111</a>
<a style="background-color:green;display:inline-block;width:80%;">2222</a>
</div>

結果：

我把粉色的寬度調小一點，19%。再試試！

發現這兩個塊之間的有個白色的小空隙了吧？爲啥會有空白呢？

由於：發明html的人是老外，老外使用空格做爲單詞之間的間隔的。inline-block 就像一個個的單詞，剛剛的代碼不是換行了嗎？噯～html還有一個空白字符壓縮的特色，你換行也好，tab也好，多個空格也好，都會壓縮成一個空格（還記得當年初學前端時遇到空格不生效只能用&nbsp；的時候嗎）。
如今知道問題的緣由了，那麼怎麼解決呢？

3、解決辦法

一、不換行

<div style="border:1px red solid">
<a style="background-color:pink;display:inline-block;width:20%;">1111</a><a 
style="background-color:green;display:inline-block;width:80%;">2222</a>
</div>

缺點：這樣寫代碼，太不優雅了，解讀性太差。最重要的是運用模版的時候，好比我遇到問題的瀑布流，那都是隻寫一個元素，剩下的是經過循環遍歷，自動添加的元素，根本沒辦法控制換不換行。
二、給父元素設置font-size：0
缺點：子元素若是須要字體的話，會須要從新在子元素添加fon-size的設置。但若是像我同樣是圖片不須要文字的話，就很完美了。
三、不用inline-block改成float
float是忽略空白符的，不過你的CSS佈局可能要從新花一下心思，可能會涉及到清除浮動之類設置。
四、word-spacing屬性
這個屬性是用來設置單詞之間的空白符的，針對IE7及如下瀏覽器hack，定義word-spacing爲-1px，便可修復IE7及如下瀏覽器下頑固的殘留1px間隙問題。
根據你字體的大小，word-spacing的值應該相應的調整。而且不一樣瀏覽器的兼容性也很差，我的不是很推薦這種方式。若是hack的話，代碼要寫一大堆，感受很麻煩。若是你非要用那我還能怎麼辦？固然是選擇原諒你啦，甩給你一個參考連接：http://demo.doyoe.com/css/inline-block-space/
五、white-space-collapse
《CSS3 Text Effects Module**》中就有了「white-space-collapse」屬性，用來設置或者檢索元素內包含的空白字符。有以下取值：

• collapse：將一系列空白摺疊爲一個單獨的字符（或者在某些狀況下，沒有字符）
• preserve：阻止用戶代理摺疊空白，換行符保留爲強制換行符。
• preserve-breaks：該值將與「collapse」同樣摺疊空白字符，但保留換行符爲強制換行符。
• discard：拋棄全部空白。
  如今該屬性被轉移到《CSS Text Level 4》中，該規範中， 「white-space」分爲兩部分：white-space-collapse和text-wrap

因此解決辦法是：white-space-collapse:discard
可是，因爲該屬性自己存在的諸多問題以及瀏覽器廠商沒有及時跟進和實現,因此根本用不了。但願這個屬性快快上架啦～～