一、遇到的問題
前些天寫瀑布流布局的時候，發現明明計算好了寬度使得一行能放下三張圖片，實際效果卻總是放不下，圖片會擠到下一行去。上圖：
可以看到，我本來是想要兩行圖片，每一行是三張。結果現在第一行的圖片跑到第二行去了。
代碼結構很簡單：
<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；圖片之間仍然有小間隙。
然后突然想到當初學習布局的時候，看過某大神提過空白的問題，結果因為沒有實踐，所以就忘了這碼事了。
二、舉個簡單的栗子分析問題
<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也好，多個空格也好，都會壓縮成一個空格（還記得當年初學前端時遇到空格不生效只能用 ；的時候嗎）。
現在知道問題的原因了，那么怎么解決呢？
三、解決辦法
1、不換行
<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>
缺點：這樣寫代碼，太不優雅了，解讀性太差。最重要的是運用模版的時候，比如我遇到問題的瀑布流，那都是只寫一個元素，剩下的是通過循環遍歷，自動添加的元素，根本沒辦法控制換不換行。
2、給父元素設置font-size：0
缺點：子元素如果需要字體的話，會需要重新在子元素添加fon-size的設置。但如果像我一樣是圖片不需要文字的話，就很完美了。
3、不用inline-block改為float
float是忽略空白符的，不過你的CSS布局可能要重新花一下心思，可能會涉及到清除浮動之類設置。
4、word-spacing屬性
這個屬性是用來設置單詞之間的空白符的，針對IE7及以下瀏覽器hack，定義word-spacing為-1px，即可修復IE7及以下瀏覽器下頑固的殘留1px間隙問題。
根據你字體的大小，word-spacing的值應該相應的調整。並且不同瀏覽器的兼容性也不好，個人不是很推薦這種方式。如果hack的話，代碼要寫一大堆，感覺很麻煩。如果你非要用那我還能怎么辦？當然是選擇原諒你啦，甩給你一個參考鏈接：http://demo.doyoe.com/css/inline-block-space/
5、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
但是，由於該屬性本身存在的諸多問題以及瀏覽器廠商沒有及時跟進和實現,所以根本用不了。希望這個屬性快快上架啦～～