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

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

哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇

<强>字体大小：0;必须添加到父元素

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

换句话说：

的CSS：

.item列表{字母间距：-0.3em;字体大小：0;}

.item-list a {letter-spacing：0; display：inline-block; font-size：SOMETHING HIGHER;}

（同样你的DOCTYPE声明必须正确或显示内联块可能在IE中有问题，至少我在使用IE7时遇到了麻烦）

这应该结束你在显示中遇到的任何额外的保证金挫折：inline-block;

Answer 2

这与您输入HTML的方式有关。因为您在IDE中很好地格式化了它，所以带有空格和新行的la，在页面上显示时会显示这些空格和换行符。而不是

<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将删除

Answer 4

我总是使用：

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

我从facebook布局中获取并为我工作很棒