以前看張鑫旭大神的《css世界》有說到這個問題，沒有總結再加上很長時間沒用過，前兩天看到別人博客才回想起來，順手記錄一下。

設置display：inline-block的元素放在一起會產生間隙（簡略html代碼）：

<style>li{list-style: none;display: inline-block; // 主要代碼就這一行width: 50px;background-color: red;}</style><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>

會產生下圖效果：

原因就是因為瀏覽器會處理行內元素之間的空白符（空格，回車換行等），在字體不為0的情況下，產生了“幽靈空白節點”（《css世界》里的概念）。

解決方法有幾種：

1.包裹元素設置font-size：0；子元素重新設置文字大小；

2.給子元素的：not(:first-child)設置margin-left負值 （在chrome上測試margin-left: -5px的時候上圖1和2之間的空隙沒了，234之間還有一點點，不知道咋回事）；

3.給子元素設置浮動float：left(注意清除浮動)；

4.標簽不換行（寫成<li>1</li><li>2</li>）。

這里引申一個面試題，全屏品字布局(主要代碼)：

<style>body{margin: 0;}.top{height: 50vh;background-color: red;}.left,.right{display: inline-block;width: 50vw;height: 50vh;}.left{background-color: green;}.right{background-color: yellow;}</style><div class="top"></div><div class="left"></div><div class="right"></div>

這樣差不多就完成了，可是看一下chrome里的顯示效果：

這里就出現了“幽靈空白節點”的問題，解決方法也很簡單，body樣式里加一句font-size:0；大功告成！

body{margin: 0; font-size: 0}

參考：

使用display:inline-block會產生什么問題？解決方法？ | 神三元的博客?47.98.159.95

總結

以上是生活随笔為你收集整理的display block 无法显示_display:inline-block产生的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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