如何去除inline-block元素之间的间隙

Question

.item-list {
  letter-spacing: -0.3em;
}
.item-list a {
  letter-spacing: 0;
  display: inline-block;
}

<div class="item-list">
  <a href="#">a</a>
  <a href="#">a</a>
  <a href="#">a</a>
  <a href="#">a</a>
</div>

只有在win ie6中，a之间的间隙仍然存在，当删除a { letter-spacing:0 }样式时，样式letter-spacing:-0.3em会变得有效。

为什么呢？我能解决这个问题吗？

- timezhong

Answer 1

哇，这个问题让我困扰了一段时间...信不信由你，在这里是你的答案：

必须在父元素中添加font-size:0;

对于你的示例，我会单独定义a标签的字体大小，并在父div元素中添加"font-size:0;"

换句话说：

CSS：

.item-list{letter-spacing:-0.3em; font-size:0;}

.item-list a{letter-spacing:0;display:inline-block; font-size:更高的字体大小;}

（还要注意你的DOCTYPE声明必须正确，否则display:inline-block在IE中可能无法正常工作，至少我在IE7上遇到了问题）

这样应该能解决你在使用display:inline-block时遇到的任何额外的间距问题；

- pepperdreamteam

---

谢谢，但我已经尝试过了。在Win IE6中仍然存在间隙，即使间隙变小了。我使用了word-spacing：-0.5em（或其他值，它与字体有关），它有效果，你可以试一下。 - timezhong

Answer 2

这与您编写HTML的方式有关。因为您在IDE中使用了空格和换行符进行格式化，这些空格和换行符会在页面上显示出来。因此，您应该使用特定的HTML标记来消除这些额外的空白和换行符。

<div class="item-list">

    <a href="#">a</a>
    <a href="#">a</a>
    <a href="#">a</a>
    <a href="#">a</a>

</div>

将其作为一行输入，它们就会消失：

<div class="item-list"><a href="#">a</a><a href="#">a</a><a href="#">a</a><a href="#">a</a></div>

- Reed Abbott

Answer 3

你可以添加这个CSS。

a{float:left}

缝隙将被移除

- Dinesh Kanivu

---

我有同样的问题，float:left 打破了居中对齐。 - Mo.

Answer 4

我总是使用：

    line-height: 2.2; //or whatever value you want

我从 Facebook 的布局中借鉴了一些东西，对我来说效果非常棒。

- RollRoll

---

你好像误解了我的意思。 - timezhong