大家好，我是IT修真院深圳分院第02期學員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網css任務06，深度思考中的知識點——去除INLINE-BLOCK間距有哪幾種方法？
1.背景介紹
display:inline; 內聯元素，簡單來說就是在同一行顯示。
display:block; 塊級元素，簡單來說就是就是有換行，會換到第二行。
display:inline-block; 即內聯塊狀元素，可以水平排版。
2.知識剖析
inline-block 內聯塊狀元素，可以水平排版。但我們發現inline-block元素間在換行顯示或空格分隔的情況下會出現空白間隙。 這種表現是符合規范的應該有的表現，而不是bug。但是有時候會對我們的布局造成影響，所以有時候我們需要想辦法去除它。
3.常見問題
常見去除inline-block間距的方法有哪些？
4.解決方案
方法一:改變書寫方式
元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就消失了。
我們可以把inline-block元素寫在同一行，這種方案是最直接的解決方案，但卻也是最不靠譜的方案，存在很多不可控因素。 很多場景會讓你崩潰：前后端協同；版本更迭；他人接手；自己忘了...，太多一不小心都可能讓這個方案失效。
考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以進行改進，如下面幾種寫法：
對于某些元素可以將中間的結束標簽去掉
方法二：font-size
這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。
方法三：使用margin負值
margin負值的大小與上下文的字體和文字大小相關，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。由于外部環境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規模使用。
方法四：使用word-spacing或letter-spacing
一個是字符間距(letter-spacing)一個是單詞間距(word-spacing)，大同小異。 父元素letter-spacing負值只要大到一定程度，其兼容性上的差異就可以被忽略。因為，即使父元素letter-spacing負值很大，也不會發生重疊。但是子元素要設置letter-spacing為0，不然會繼承父元素的值；使用word-spacing時，只需設置父元素word-spacing為合適值即可。
使用letter-spacing和word-spacing時， 其在不同瀏覽器下效果不同，在Opera瀏覽器下最小間距1像素，然后，letter-spacing再小就還原了。
5.編碼實戰
6.擴展思考
上面使用到的幾種方法都存在一定的缺陷，怎樣兼容盡可能多的瀏覽器？
在不同情況下選用不同的方法，font-size基本上可以解決大部分瀏覽器下inline-block元素之間的間距。或者可以同時寫多種方法，這樣就可以兼容不同瀏覽器。
7.更多討論
1.四種方法哪種更為實用呢？
2.還有哪些方法可以去除inline-block間距？
3.INLINE-BLOCK空隙產生的原因？
通過前面的列子我們可以看到當沒有換行或者回車時，空隙就不存在了，所以說間隙是由換行或者回車導致的。 其實space是由換行或回車所產生空白符所致，解決辦法：就是去掉空白符。為什么font-size會對間隙有影響。 space是由換行或回車所產生空白符所致，既然是字符當然無法擺脫font的控制。
課后提問：
問：我們任務中一般用哪種方法？
答：使用font-size，它的副作用比較小，多數瀏覽器都能兼容。給父元素設置font-size為0，再給子元素設置font-size為所需值，避免因繼承導致子元素內容無法正確顯示。
8.參考文獻
參考一：張鑫旭-鑫空間-鑫生活
9.視頻資料
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
下期不見不散~
