大家好弟断，我是IT修真院深圳分院第3期的學(xué)員咏花，一枚正直純潔善良的前端程序員，今天給大家分享一下阀趴，修真院官網(wǎng)前端工程師深度思考中的知識(shí)點(diǎn)——inline-block間距產(chǎn)生的原因昏翰，去除inline-block間距的方法？及這個(gè)問(wèn)題未來(lái)可能的解決方向刘急。
一.背景介紹
1棚菊、inline-block到底是什么？
關(guān)于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 后的元素創(chuàng)建了一個(gè)行級(jí)的塊容器排霉，該元素內(nèi)部（內(nèi)容）被格式化成一個(gè)塊元素窍株，同時(shí)元素本身則被格式化成一個(gè)行內(nèi)元素。
一句話解釋：它是一個(gè)格式化為行內(nèi)元素的塊容器攻柠。
兼具行內(nèi)元素和塊元素的特點(diǎn)。
2后裸、inline-block為什么會(huì)有間距瑰钮？
歸根結(jié)底這是一個(gè)西文排版的問(wèn)題。舉一個(gè)很簡(jiǎn)單的例子：
I am very happy
南京市長(zhǎng)江大橋歡迎您
英文有空格作為詞分界微驶，而中文則沒(méi)有浪谴。（這背后延伸出一個(gè)中文分詞的問(wèn)題）
這個(gè)問(wèn)題的原因可以上述到SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言)和TeX(排版工具)，它實(shí)際上是一個(gè)行內(nèi)（inline）的問(wèn)題因苹，它由空格苟耻、換行或回車(chē)所產(chǎn)生空白符所致
二.知識(shí)剖析
既然知道問(wèn)題產(chǎn)生的原因，解決方法就由此得出扶檐。
1凶杖、改變代碼書(shū)寫(xiě)方式。
2款筑、改變字符大小智蝠。
3腾么、改變?cè)亻g距。
三.常見(jiàn)問(wèn)題
常見(jiàn)去除inline-block間距的方法有哪些杈湾？
四.解決方案
方法1: 改變書(shū)寫(xiě)方式
方法2：font-size
方法3：使用margin負(fù)值
方法4：使用word-spacing或letter-spacing
這些方法在網(wǎng)上能查到很詳細(xì)的說(shuō)明解虱，我就簡(jiǎn)略記錄一下。
方法1:改變書(shū)寫(xiě)方式
元素間留白間距出現(xiàn)的原因就是標(biāo)簽段之間的空格漆撞，因此殴泰，去掉HTML中的空格，自然間距就消失了浮驳。
我們可以把inline-block元素寫(xiě)在同一行艰匙，這種方案是最直接的解決方案，但卻也是最不靠譜的方案抹恳，存在很多不可控因素员凝。 很多場(chǎng)景會(huì)讓你崩潰：前后端協(xié)同；版本更迭奋献；他人接手健霹；自己忘了...，太多一不小心都可能讓這個(gè)方案失效瓶蚂。
考慮到代碼可讀性糖埋，顯然連成一行的寫(xiě)法是不可取的，我們可以進(jìn)行改進(jìn)窃这，還有下面非人類(lèi)的寫(xiě)法：
方法2：font-size
這個(gè)方法瞳别，基本上可以解決大部分瀏覽器下inline-block元素之間的間距。
方法3：使用margin負(fù)值
margin負(fù)值的大小與上下文的字體和文字大小相關(guān)杭攻，Arial字體的margin負(fù)值為-3像素祟敛，Tahoma和Verdana就是-4像素，而Geneva為-6像素兆解。由于外部環(huán)境的不確定性馆铁，以及最后一個(gè)元素多出的父margin值等問(wèn)題，這個(gè)方法不適合大規(guī)模使用锅睛。
方法4：使用word-spacing或letter-spacing
一個(gè)是字符間距(letter-spacing)一個(gè)是單詞間距(word-spacing)埠巨，大同小異。
letter-spacing子元素要設(shè)置letter-spacing為0现拒，不然會(huì)繼承父元素的值辣垒；使用word-spacing時(shí)，只需設(shè)置父元素word-spacing為合適值即可印蔬。
使用letter-spacing和word-spacing時(shí)勋桶，其在不同瀏覽器下效果不同。
五.編碼實(shí)戰(zhàn)
六.擴(kuò)展思考
上面使用到的幾種方法都存在一定的缺陷，怎樣兼容盡可能多的瀏覽器哥遮？
在不同情況下選用不同的方法岂丘，font-size基本上可以解決大部分瀏覽器下inline-block元素之間的間距∶咭或者可以同時(shí)寫(xiě)多種方法奥帘，這樣就可以兼容不同瀏覽器
這個(gè)元素的屬性很奇特，剛出現(xiàn)的時(shí)候用得卻不多仪召，因?yàn)楫?dāng)初它在IE上的兼容性不好
window7上運(yùn)行的IE版本是IE8寨蹋，微軟已經(jīng)在2015年終止了對(duì)Windows 7的主流支持，準(zhǔn)備到2020年停止對(duì)window7的所有技術(shù)支持
現(xiàn)在全瀏覽器對(duì)inline-block兼容性都很好扔茅，CSS任務(wù)很多布局也是利用這個(gè)元素的特殊屬性來(lái)布局已旧。再加上CSS壓縮成一行完全解決空白字符間距問(wèn)題。有點(diǎn)得心應(yīng)手的感覺(jué)召娜。
但是自提出這個(gè)元素過(guò)去10多年运褪，現(xiàn)在更是出現(xiàn)flex、Grid這類(lèi)好用的排版布局方式玖瘸。他們確實(shí)有一些兼容性問(wèn)題秸讹。好消息是2017年9月27日CSS彈性盒子布局規(guī)范已處于最終征求意見(jiàn)稿階段，各大瀏覽器也漸漸支持彈性盒子的所有功能雅倒。
相信各位在css任務(wù)中剛接觸flex的時(shí)候驚為天人璃诀，以后它的應(yīng)用會(huì)越來(lái)越多，連B/S的4.0版也要加入flex屬性蔑匣，這個(gè)蛋疼的應(yīng)用問(wèn)題會(huì)隨著時(shí)間消失劣欢。
四種方法哪種更為實(shí)用呢？
全都不實(shí)用裁良，第一種不方便書(shū)寫(xiě)凿将，后幾種會(huì)導(dǎo)致內(nèi)容和格式的依賴性較強(qiáng)，違背內(nèi)容與樣式分離的要求趴久。在實(shí)際布局中很少單純用inline-block排版丸相，經(jīng)常和float、position彼棍、flex配合使用。
我暫時(shí)知道的實(shí)用方法是用代碼壓縮膳算，原理是方法1的特性座硕，將代碼壓縮到一行。工具有Uglify等涕蜂』遥或者使用不產(chǎn)生額外空白節(jié)點(diǎn)或者支持空白控制的模板語(yǔ)言。比如Jade、Smarty（{strip} | Smarty）等
這些方法都是在CSS控制空白字符壓縮特性尚未得到普遍支持之前使用的蜘拉。在網(wǎng)上搜索的信息都是2012年萨西、2013年的內(nèi)容。如果項(xiàng)目還要考慮兼容IE8以下或者奇奇怪怪瀏覽器的話旭旭，了解一下這個(gè)問(wèn)題也未嘗不可谎脯，至少遇到問(wèn)題知道怎么找解決方法。
七.更多討論
八.參考文獻(xiàn)
參考一：張?chǎng)涡?鑫空間-鑫生活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元素間間隙產(chǎn)生及去除詳解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 元素之間出現(xiàn)的空格持寄？https://www.zhihu.com/question/21468450
參考六：如何裁剪 CSS/JS 文件(使用 UglifyJS 和 UglifyCSS)http://wiki.jikexueyuan.com/project/symfony-cookbook/minify-cssjs.html
參考七：代碼壓縮UglifyJS ——解決了display:inline-block之間留白問(wèn)題http://www.reibang.com/p/ece740688a01
PPT連接：
PPT?
如果這篇文章對(duì)你有幫助源梭，并且使你對(duì)修真院免費(fèi)在線學(xué)習(xí)感興趣，可以通過(guò)我的鏈接注冊(cè)成員會(huì)稍味，這會(huì)使我得到學(xué)分（兌換學(xué)時(shí)）延長(zhǎng)學(xué)習(xí)時(shí)間：
邀請(qǐng)鏈接：http://www.jnshu.com/login/1/13374512
邀請(qǐng)碼：13374512
