關於inline-block元素間隙的處理

參考櫥窗外的小孩，原文連結https://www.cnblogs.com/showcase/p/10469361.html

如下，兩個inline-block之間，會產生預設的間隙。原因是因為元素被當成行內元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，根據white-space的處理方式（預設是normal，合併多餘空白），原來HTML程式碼中的回車換行被轉成一個空白符，所以元素之間就出現了空隙。這些元素之間的間距會隨著字型的大小而變化，當行內元素font-size:16px時，間距為8px。

<div>
        <
 
input type="text" placeholder="請輸入關鍵字 />
        <button></button>    
</div>

那麼，如何能處理掉這些間隙呢？列舉以下幾個（但不限於）五個方法：

1，去除元素間的空白

通過將上一個元素的閉合標籤與下一個元素的開始標籤寫在同一行，可以去除元素間的空白，或者將兩個inline-block元素間加上空白註釋，或者不寫元素的閉合標籤等，例如這麼寫：

<ul>
    <li>one</li  
    ><li>two</li  
    
 
><li>three</li>
</ul>
<!-- or -->
<ul>
    <li>one</li><!--  
    --><li>two</li><!--  
    --><li>three</li>
</ul>

2，父元素設定font-size為0，子元素單獨再設定字型大小

如下所示：

.layout.inline-block .left-center-right {
    font-size: 0;
}
.layout.inline-block .left-center-right>div {
    font-size: 16px;
}
 

3，設定margin-right為負值

用margin負值來抵掉元素間的空白，不過margin負值的大小與上下文的字型和文字大小相關，並且同一大小的字型，元素之間的間距在不同瀏覽器下是不一樣的，如：font-size:16px時，Chrome下元素之間的間距為8px,而Firefox下元素之間的間距為4px。所以這個方法並不通用，也相對比較麻煩，因此不太推薦使用。

4，給inline-block元素加float或者flex

讓行內塊元素浮動起來，或者給父盒子加上display: flex; 都可以解決空白間隙的問題，不過這樣處理的三欄式佈局也就沒必要用inline-block啦。

5，設定字元間距或者單詞間距

這兩個方法的原理有點像二所用的font-size，具體做法是給父元素一個letter-spacing或者word-spacing的負值，子元素再調整為0即可，具體使用字元間距還是單詞間距其實大同小異。

/* letter-spacing */
.layout .left-center-right{
     letter-spacing: -0.5em;
}
.layout .left-center-right>div{
     letter-spacing: 0;
}
 
/* word-spacing */
 
.layout .left-center-right{
     word-spacing: -0.5em;
}
.layout .left-center-right>div{
     word-spacing: 0;
}