使用display inline-block 布局時，出現的間距問題的解決辦法和相關說明

 

在CSS中，塊級對象元素會單獨占一行顯示，多個block元素會各自新起一行。而內聯對象元素前后不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。

使用 display inline-block 將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。

請大家先看display inline-block 實際應用中的效果

.my-test { width: 100%; height: 50px;}
.my-test ul { }
.my-test ul li { list-style: none; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}
<div class="my-test">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

增加  display inline-block 樣式

.my-test ul li { list-style: none; display: inline-block; vertical-align: middle; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}

 這里有一個問題 ： 

li之間出現了外邊距

解決這個問題的辦法有兩種：

1.li元素之間不換行

<div class="my-test">
  <ul>
    <li>1</li>
    <li>2</li><li>3</li>
  </ul>
</div>

如圖，2和3之間未換行，外邊距消失。

2.ul設置 font-size:0px;

如圖，li之間的外邊距都消失了。

 繼續思考 為什么li之間會出現外邊距。

<div class="my-test">
  <ul id="ulid">
    <li>1</li>
    <li>2</li><li>3</li>
  </ul>
</div>

獲取UL的子節點

可以看到，第一個li和第二個li之間有一個text的節點，而第二個li和第三個li之間並沒有節點。

這里延伸出來新的問題 1.為何第一個text節點並沒有導致第一個li出現外邊距 2.text節點為何會導致出現外邊距

關於第一個問題，猜測是因為瀏覽器自動幫忙處理了第一個節點，有知道原理的兄弟，請留言，拜謝。

第二個問題，text節點其實是一個回車，回車會被解析為一個空白符。空白符瀏覽器是作為一個半角空格來處理的。

.my-test ul {}
  <div class="my-test">
    <ul id="ulid">
      <li>1</li>
      <li>2</li> <li>3</li>
    </ul>
  </div>

在2和3之間手動加入一個空格

出現了外邊距

這也解釋了為何設置font-size:0之后，間距會消失的情況。