一、問題產(chǎn)生

由于html代碼格式化后，標簽會縮進或者換行。由于瀏覽器默認處理導(dǎo)致元素在頁面顯示中出現(xiàn)單個空格問題，尤其在行內(nèi)或者行內(nèi)塊元素布局時影響比較明顯

例如：

代碼

頁面顯示

二、解決方案

這種問題出現(xiàn)讓人很頭疼，尋訪答案卻都差強人意：不是兼容性問題就是需要對布局進行特殊處理，總之都不是很完美。

最終我的解決方案是：給右側(cè)行內(nèi)塊元素設(shè)置css樣式：margin-left:-4px;

這樣雖然不是從根本上解決問題，但是：一不會產(chǎn)生兼容性問題，二不會影響整體布局

修改后頁面顯示效果

三、一些其他大佬的方案

1、不換行

<div>
<a>1111</a><a 
style="display:inline-block;80%;">2222</a>
</div>

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

collapse：將一系列空白折疊為一個單獨的字符（或者在某些情況下，沒有字符）
preserve：阻止用戶代理折疊空白，換行符保留為強制換行符。
preserve-breaks：該值將與「collapse」一樣折疊空白字符，但保留換行符為強制換行符。
discard：拋棄所有空白。
現(xiàn)在該屬性被轉(zhuǎn)移到《CSS Text Level 4》中，該規(guī)范中， 「white-space」分為兩部分：white-space-collapse和text-wrap

所以解決辦法是：white-space-collapse:discard
但是，由于該屬性本身存在的諸多問題以及瀏覽器廠商沒有及時跟進和實現(xiàn),所以根本用不了。希望這個屬性快快上架啦～～

大佬方案原文鏈接https://www.cnblogs.com/cuncunjun/p/7390623.html

總結(jié)

以上是生活随笔為你收集整理的解决行内块元素（inline-block）之间的空格或空白问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。