大家好，我是IT修真院深圳分院第3期的學員，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網前端工程師深度思考中的知識點——inline-block間距產生的原因，去除inline-block間距的方法？及這個問題未來可能的解決方向。
一.背景介紹
1、inline-block到底是什么？
關于inline-block在display里的英文解釋：
This value causes an
element to generate an inline-level block container. The inside of an
inline-block is formatted as a block box, and the element itself is
formatted as an atomic inline-level box.
大致意思就是：inline-block 后的元素創建了一個行級的塊容器，該元素內部（內容）被格式化成一個塊元素，同時元素本身則被格式化成一個行內元素。
一句話解釋：它是一個格式化為行內元素的塊容器。
兼具行內元素和塊元素的特點。
2、inline-block為什么會有間距？
歸根結底這是一個西文排版的問題。舉一個很簡單的例子：
I am very happy
南京市長江大橋歡迎您
英文有空格作為詞分界，而中文則沒有。（這背后延伸出一個中文分詞的問題）
這個問題的原因可以上述到SGML(標準通用標記語言)和TeX(排版工具)，它實際上是一個行內（inline）的問題，它由空格、換行或回車所產生空白符所致
二.知識剖析
既然知道問題產生的原因，解決方法就由此得出。
1、改變代碼書寫方式。
2、改變字符大小。
3、改變元素間距。
三.常見問題
常見去除inline-block間距的方法有哪些？
四.解決方案
方法1: 改變書寫方式
方法2：font-size
方法3：使用margin負值
方法4：使用word-spacing或letter-spacing
這些方法在網上能查到很詳細的說明，我就簡略記錄一下。
方法1:改變書寫方式
元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就消失了。
我們可以把inline-block元素寫在同一行，這種方案是最直接的解決方案，但卻也是最不靠譜的方案，存在很多不可控因素。 很多場景會讓你崩潰：前后端協同；版本更迭；他人接手；自己忘了...，太多一不小心都可能讓這個方案失效。
考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以進行改進，還有下面非人類的寫法：
方法2：font-size
這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距。
方法3：使用margin負值
margin負值的大小與上下文的字體和文字大小相關，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。由于外部環境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規模使用。
方法4：使用word-spacing或letter-spacing
一個是字符間距(letter-spacing)一個是單詞間距(word-spacing)，大同小異。
letter-spacing子元素要設置letter-spacing為0，不然會繼承父元素的值；使用word-spacing時，只需設置父元素word-spacing為合適值即可。
使用letter-spacing和word-spacing時，其在不同瀏覽器下效果不同。
五.編碼實戰
六.擴展思考
上面使用到的幾種方法都存在一定的缺陷，怎樣兼容盡可能多的瀏覽器？
在不同情況下選用不同的方法，font-size基本上可以解決大部分瀏覽器下inline-block元素之間的間距。或者可以同時寫多種方法，這樣就可以兼容不同瀏覽器
這個元素的屬性很奇特，剛出現的時候用得卻不多，因為當初它在IE上的兼容性不好
window7上運行的IE版本是IE8，微軟已經在2015年終止了對Windows 7的主流支持，準備到2020年停止對window7的所有技術支持
現在全瀏覽器對inline-block兼容性都很好，CSS任務很多布局也是利用這個元素的特殊屬性來布局。再加上CSS壓縮成一行完全解決空白字符間距問題。有點得心應手的感覺。
但是自提出這個元素過去10多年，現在更是出現flex、Grid這類好用的排版布局方式。他們確實有一些兼容性問題。好消息是2017年9月27日CSS彈性盒子布局規范已處于最終征求意見稿階段，各大瀏覽器也漸漸支持彈性盒子的所有功能。
相信各位在css任務中剛接觸flex的時候驚為天人，以后它的應用會越來越多，連B/S的4.0版也要加入flex屬性，這個蛋疼的應用問題會隨著時間消失。
四種方法哪種更為實用呢？
全都不實用，第一種不方便書寫，后幾種會導致內容和格式的依賴性較強，違背內容與樣式分離的要求。在實際布局中很少單純用inline-block排版，經常和float、position、flex配合使用。
我暫時知道的實用方法是用代碼壓縮，原理是方法1的特性，將代碼壓縮到一行。工具有Uglify等。或者使用不產生額外空白節點或者支持空白控制的模板語言。比如Jade、Smarty（{strip} | Smarty）等
這些方法都是在CSS控制空白字符壓縮特性尚未得到普遍支持之前使用的。在網上搜索的信息都是2012年、2013年的內容。如果項目還要考慮兼容IE8以下或者奇奇怪怪瀏覽器的話，了解一下這個問題也未嘗不可，至少遇到問題知道怎么找解決方法。
七.更多討論
八.參考文獻
參考一：張鑫旭-鑫空間-鑫生活http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
參考二：inline-block元素間間隙產生及去除詳解http://demo.doyoe.com/css/inline-block-space/
參考三：CSS Flexible Box Layout Module Level 1https://drafts.csswg.org/css-flexbox/
參考四：使用CSS彈性盒子https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
參考五：有哪些好方法能處理 display: inline-block 元素之間出現的空格？https://www.zhihu.com/question/21468450
參考六：如何裁剪 CSS/JS 文件(使用 UglifyJS 和 UglifyCSS)http://wiki.jikexueyuan.com/project/symfony-cookbook/minify-cssjs.html
參考七：代碼壓縮UglifyJS ——解決了display:inline-block之間留白問題http://www.lxweimin.com/p/ece740688a01
PPT連接：
PPT?
如果這篇文章對你有幫助，并且使你對修真院免費在線學習感興趣，可以通過我的鏈接注冊成員會，這會使我得到學分（兌換學時）延長學習時間：
邀請鏈接：http://www.jnshu.com/login/1/13374512
邀請碼：13374512
