一、問題產生
由於html代碼格式化后，標簽會縮進或者換行。由於瀏覽器默認處理導致元素在頁面顯示中出現單個空格問題，尤其在行內或者行內塊元素布局時影響比較明顯
例如：
代碼
頁面顯示
二、解決方案
這種問題出現讓人很頭疼，尋訪答案卻都差強人意：不是兼容性問題就是需要對布局進行特殊處理，總之都不是很完美。
最終我的解決方案是：給右側行內塊元素設置css樣式：margin-left:-4px;
這樣雖然不是從根本上解決問題，但是：一不會產生兼容性問題，二不會影響整體布局
修改后頁面顯示效果
三、一些其他大佬的方案
1、不換行
<div style="border:1px red solid"> <a style="display:inline-block;width:20%;">1111</a><a style="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
但是，由於該屬性本身存在的諸多問題以及瀏覽器廠商沒有及時跟進和實現,所以根本用不了。希望這個屬性快快上架啦～～
大佬方案原文鏈接 https://www.cnblogs.com/cuncunjun/p/7390623.html