解決兩個寬度 50％ 的子元素無法在同行的問題

行內區塊(inline-block)可以讓我們可以以行內（inline）的方式呈現，但同時擁有（block）的屬性，不過，在設定寬度上我們可能會遇到一個奇怪的問題：

假設我們想要新增兩個在同行的 div 元素，並讓他們各佔一半，我們會這樣撰寫：

<div class="box">
  <div>CHILD</div>
  <div>CHILD</div>
</div>

.box{
  width:200px;
  background-color: blue;
}
.box div{
  text-align: center;
  display: inline-block;
  width:50%;
  background-color: #d8e2dc;
}

我們可能會預期畫面出現

卻發現結果兩個子元素沒有在同一行

而會有這樣的問題是因為換行符號。我們在第一個 div 標籤後方加上的換行符號，會相等於空白符號，這個空白符號的寬度加上兩個子元素的寬度就會超過 100%，導致兩個子元素無法放在同一行。

解決辦法有幾種：

1. 刪除換行符號
   最簡單的方式就是直接刪除換行符號，不過這會造成 HTML 結構的可讀性變差。

   <div class="box">
     <div>CHILD</div><div>CHILD</div>
   </div>

2. 將字體大小設為 0
   知道是因為空白符號造成無法在同行後，我們可以聯想到只要將字體設為 0 ，這個空白就不會佔有空間了。

實作放事就是直接在父層加上 font-size:0 （記得子層如果有文字要記得設定字體大小喔）。

.box{
  width:200px;
  font-size: 0; /* 隱藏空白符號 */
}
.box div{
  display: inline-block;
  font-size: 16px;  /* 設定子元素字體大小 */
  width:50%;
}

除了這些也可以使用負的 margin、letter-spacing、word-spacing 調整，但個人覺得沒有那麼實用，以上就是行內區塊無法同行的解決辦法說明囉。

參考資料
拜拜了,浮动布局-基于display:inline-block的列表布局