?

在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之后，間距會消失的情況。

?

轉載于:https://www.cnblogs.com/tmbm/p/10374633.html

總結

以上是生活随笔為你收集整理的使用display inline-block 布局时，出现的间距问题的解决办法和相关说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。