方法一：移除空格

元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：

<div class="space"><a href="##">惆悵</a><a href="##">淡定</a><a href="##">熱血</a>
</div>

?或者是：

<div class="space"><a href="##">惆悵</a><a href="##">淡定</a><a href="##">熱血</a>
</div>

?或者是借助HTML注釋：

<div class="space"><a href="##">惆悵</a><!----><a href="##">淡定</a><!----><a href="##">熱血</a>
</div>

?方法二：使用margin負值

.space a {display: inline-block;margin-right: -3px;
}

margin負值的大小與上下文的字體和文字大小相關，間距對應大小值可以參見“基于display:inline-block的列表布局

例如，對于12像素大小的上下文，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。

由于外部環境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規模使用。

方法三：讓閉合標簽吃膠囊

如下處理：

<div class="space"><a href="##">惆悵<a href="##">淡定<a href="##">熱血</a>
</div>

?

注意，為了向下兼容IE6/IE7等喝蒙牛長大的瀏覽器，最后一個列表的標簽的結束（閉合）標簽不能丟。

在HTML5中，我們直接：

<div class="space"><a href="##">惆悵<a href="##">淡定<a href="##">熱血
</div>

方法四：使用font-size:0

如下處理：

.space {font-size: 0;
}
.space a {font-size: 12px;
}

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

.space {font-size: 0;-webkit-text-size-adjust:none;
}

方法五：使用letter-spacing

如下處理：

.space {letter-spacing: -3px;
}
.space a {letter-spacing: 0;
}

方法六：使用word-spacing

如下處理：

.space {word-spacing: -6px;
}
.space a {word-spacing: 0;
}

?一個是字符間距(letter-spacing)一個是單詞間距(word-spacing)，大同小異。據我測試，word-spacing的負值只要大到一定程度，其兼容性上的差異就可以被忽略。因為，貌似，word-spacing即使負值很大，也不會發生重疊。

轉載于:https://www.cnblogs.com/leena/p/6930175.html

總結

以上是生活随笔為你收集整理的inline-block空隙怎么解决的全部內容，希望文章能夠幫你解決所遇到的問題。

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