最近在做的一個項目里面碰到這么一個問題：
<p> <span>塊1</span> <span>塊2</span> </p>
在“塊1”和“塊2”之間存在着一個大概3em的空白...圖就不上了
這明顯不符合預期....
最后發現：當這兩個span寫在一行...問題就解決了...
<p> <span>塊1</span><span>塊2</span> </p>
原因在於 行內元素之間在換行時會產生一個換行符號，然后會占用一定的寬度...
同理 i s之類的行內元素也是會存在一樣的問題
並且這個寬度是小於一個空格的...
在此記錄一下這個浪費了我一天時間的問題- -！歌以詠志
=======7月8日更新=======
之前的解決方法是，把所有的span都寫到一行，這當然是最穩妥的做法，但是帶來的麻煩肯定是有的...這意味着需要書寫一行特別特別長的代碼，按照代碼規范來看，一行代碼是最好不要超過50還是200個字符來着....（具體請參閱efe代碼規范）
所以有三種解決方法：
1、在js里拼接好字符串后再通過innerHtml方法顯示出來
2、這個空白貌似確實就是3em大小，所以只要設置span的margin-right: -3em即可，親測有效，唯一不爽的地方是，如果行內存在i s em之類其他的元素，每個元素都得設置一下margin-right，並不是很爽= =！
3、換行符號的寬度是由所在標簽的字體大小有關，以上面的代碼為例，p的font-size越大，塊1與塊2之間的空白就越寬，反之則越小。
所以解決方案就是：將p的font-size設為0即可。
但是，忘了是在哪里看到的一篇文章表示，有的瀏覽器不支持font-size: 0，目測應該是萬惡的舊版IE... 所以在這種情況下，選擇js拼接是比較好的，但是如果做的HTML5開發，特別是Web App開發，那移動端的瀏覽器肯定是支持font-size 0的啦。
=======再補充========
這種方法算是奇技淫巧....
<p> <span>塊1</span ><span>塊2</span ><span>塊3</span> </p> <p> <span>塊1</span><!-- --><span>塊2</span><!-- --><span>塊3</span> </p>
半夜睡不着在網上看到的...這樣奇奇怪怪的寫法也是能夠保證這三個span都在同一行里...
撒由那拉~
---------------------
作者：clarkt
來源：CSDN
原文：https://blog.csdn.net/clarkt/article/details/46363909
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！