css - 如何删除行内 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之间的间距仍然存在，样式letter-spacing:-0.3em会在删除样式时生效一个{字母间距:0}

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

Answer 1

哇，这个让我难住了一段时间......信不信由你，这就是你的答案:

字体大小:0；必须添加到父元素

在您的示例中，我将分别定义 a 标签的字体大小，并添加“font-size:0;”到父 div 元素

换句话说:

CSS:

.item-list{字母间距:-0.3em;字体大小:0；

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

(另外，您的 DOCTYPE 声明必须正确，否则显示内联 block 在 IE 中可能会出现问题，至少我在 IE7 中遇到过问题)

这应该会结束您在 display:inline-block 中遇到的任何额外利润挫败感；