如何消除内联块元素之间的间隙

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样式后a { letter-spacing:0 }样式才会生效

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

Answer 1

哇，这个while...believe把我难倒了，不管是不是，这是你的答案：

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

在您的示例中，我将分别定义a标记的font-size，并将"font-size:0;“添加到父div元素中

换句话说：

css：

..item list{字母间距：-0.3em；font-size:0;}

..item list a{字母间距:0；display:inline-block；font-size:更高；}

(另外，你的DOCTYPE声明必须是正确的，或者显示内嵌块可能会在IE中工作有问题，至少我在IE7中遇到了问题)

这应该会结束你在display中遇到的任何额外的边距挫折:inline-block；

Answer 2

这与你输入HTML的方式有关。因为您在IDE中用空格和换行符很好地格式化了它，所以当在页面上显示时，这些空格和换行符就会出现。因此，不是

<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>

Answer 3

您可以添加此CSS

a{float:left}

Gap将被移除