根本原因：inline-block元素之間之所以有空白間距是因為空格有字體大小原因。

?

第一種：

　　把代碼之間的換行空白都去掉。

? ? ? 例如：

? ? ?<div>第一個inline-block元素</div><div>第二個inline-block元素</div>

第二種：　　

　　把inline-block元素用一個大的div包起來，然后設置其字體大小為0即可，inline-block元素字體大小再單獨設置。

　　例如：

? ? ?<div style=”font-size:0" class="space">
? ? ? ? ? <div>第一個inline-block元素</div>
? ? ? ? ? <div>第二個inline-block元素</div>
? ? ?</div>

這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。不過有個瀏覽器，就是Chrome, 其默認有最小字體大小限制，因為，考慮到兼容性，我們還需要添加：?

類似下面的代碼：

.space {

??? font-size: 0;

??? -webkit-text-size-adjust:none;

}

?

總結

以上是生活随笔為你收集整理的去除inline-block元素间间距的全部內容，希望文章能夠幫你解決所遇到的問題。

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