問題：行內(nèi)元素或者display設(shè)置為inline-block的元素之間如果有空格或者換行會存在一小段的間距大概4px左右畅形，如下圖所示阅懦，經(jīng)測試IE斜纪，CH搔弄， FF中均存在這種問題幅虑，通常的解決辦法也很簡單那就是寫在一行且不留空格，元素少時尚能解決問題元素多時一行的長度將超過一屏的寬度顾犹，這是非常不協(xié)調(diào)的排版方式倒庵，所以我們必須找到一種簡單且能解決問題的辦法：
<div style="display:inline-block;background: #c570d4">
<h3>父元素</h3>
<div style="display:inline-block;background: #26d8c9">子元素1</div>
<div style="display:inline-block;background: #f0f521;">子元素2</div>
</div>
辦法：通過廣泛的搜索找到幾種比較合適的方法（張鑫旭總結(jié)的《去除inline-block元素間間距的N種方法》），幾種方法中大都差強人意炫刷，這里說兩種比較好一點的辦法：
1.借用 < !-- --> ：沒錯就是借用html的注釋擎宝，注釋里的空格和換行都不會影響網(wǎng)頁的實際渲染，所以借用這種方式可以達到消除間距的問題浑玛，缺陷是稍有不美觀绍申，但影響不大；
<div style="display:inline-block;background: #c570d4">
<h3>父元素</h3>
<div style="display:inline-block;background: #26d8c9">子元素1</div><!-- 這里的注釋正好鏈接兩個元素不產(chǎn)生空格
--><div style="display:inline-block;background: #f0f521;">子元素2</div>
</div>
2.font-size:0; ：通過給父元素設(shè)置font-size：0可以達到消除空格的效果;
<div style="display:inline-block;background: #c570d4;font-size:0">
<h3 style="font-size:18.72px">父元素</h3>
<div style="display:inline-block;background: #26d8c9;font-size: 16px">子元素1</div>
<div style="display:inline-block;background: #f0f521;font-size: 16px">子元素2</div>
</div>
如果是一篇普通的備忘性質(zhì)的文章可能到這就應(yīng)該結(jié)束了锄奢，可我并沒有滿足失晴，因為對這兩種仍舊不滿意，1方法在多個子元素時會顯得十分臃腫拘央；2方法要分別設(shè)置子元素字體大小（不設(shè)置繼承的font-size為0）书在，如果都是一樣的元素通過css設(shè)置還算方便如果多條不同種類的例如有div和h3且字體并不容易設(shè)置灰伟，h3的字體大小為1.17em，默認父元素為16px儒旬，計算為18.72px栏账；如果不去查我想大多數(shù)人都不知道h3的字體大小吧，起碼我不知道栈源。1方法已經(jīng)“不可救藥”了挡爵，我們看看2方法還有沒有搶救一下的可能；
首先思考一下原理：
單獨的空格其實并不會存在甚垦，那什么情況下會存在呢茶鹃，存在于字中間涣雕，存在于字和行內(nèi)元素之間，存在于行內(nèi)元素與行內(nèi)元素之間闭翩；當(dāng)font-size為0時挣郭，字沒有寬高，所以空格也不會單獨占據(jù)空間疗韵，通過上面的結(jié)果我們知道了行內(nèi)元素之間也有這種現(xiàn)象兑障，所以我們可以認為行內(nèi)元素和字有某種共有的特性，當(dāng)font-size為0時也觸發(fā)的元素與元素之間空格不顯示的效果蕉汪，此時我們再給子元素設(shè)置字體里面的字就可以顯示出來了流译；所以如果父元素存在文本元素時需要用標(biāo)簽包裹添加字體大小才能顯示出來；
原理知道了再看看有哪些地方不滿意需要改造者疤，子元素設(shè)置大小我們不滿意先蒋，有沒有哪個屬性可以保持原來的大小而不是去計算到底多大？這個當(dāng)然有的啦宛渐，設(shè)置為默認大小即可：font-size:medium; 還有一個問題我們不滿意溢豆，分別設(shè)置很麻煩能一塊設(shè)置嗎？當(dāng)然是能的了错负，考慮到只影響到子元素我們使用直接子元素選擇器：>项贺；我們需要選到所有的子元素，腦海里有個符號冒了出來那就是：*寇蚊；代碼如下：
<style>
#parent>*{
font-size: medium;
}
</style>
<div id="parent" style="display:inline-block;background: #c570d4;font-size:0">
<h3>父元素</h3>
<div style="display:inline-block;background: #26d8c9;">子元素1</div>
<div style="display:inline-block;background: #f0f521;">子元素2</div>
</div>
經(jīng)過測試我們發(fā)現(xiàn)這個方法也并非完美H3被設(shè)置為了16px而不是18.72px笔时；翻閱文檔發(fā)現(xiàn)原來medium是絕對大小，一般是16px仗岸，其實也不必太過擔(dān)心因為h1-h6大小因瀏覽器而異所以一般在初始化樣式時會改變它的大小允耿，下圖為淘寶網(wǎng)中h3的font-size大小：
