每隔一个按钮之间的间距不均匀

Question

我有一组按钮（使用<a></a>或button制作效果相同），这些按钮是inline-block元素。

当我把它们中的许多内联时，它们之间的间距不均匀。 每隔一个按钮都有不同的间距。

请注意我不是要删除按钮之间的空格，我希望它是均匀的。

第一个和第二个按钮之间的差异大约为1px，但第二个和第三个按钮的差异似乎是2px间距。然后模式继续。我把黑色和箭头放在匹配的间距上，这样你就可以看到图案了。

CSS

.btn,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  @include transitions;
  display: inline-block;
  overflow: visible;
  margin: ($baseline/2) 0;
  padding: .6em 2em;
  background: $default;
  color: #fff;
  text-decoration: none;
  vertical-align: top;
  -webkit-appearance: none;
  outline: none;
  border: 0;
  cursor: pointer;
  zoom: 1;
}

HTML

        <a class="btn bg-green" href="#" role="button">Download</a>
        <a class="btn bg-yellow" href="#" role="button">Download</a>
        <a class="btn bg-red" href="#" role="button">Download</a>
        <a class="btn bg-blue" href="#" role="button">Download</a>
        <a class="btn bg-silver" href="#" role="button">Download</a>
        <a class="btn bg-gray" href="#" role="button">Download</a>

在这里你可以更好地看到间距不均匀

Answer 1

从我能解决的问题来看，问题似乎是sofia font设置在body上，所以：

• 如果您更改Arial，您会发现差距没有差异。

  或

• 您可以将当前font-size从15px增加到16px并保留sofia

Answer 2

dippas回答正确指出字体是问题。更具体地说，它是用于问题的按钮之间的空间的字体。如果您不想更改按钮上的字体，可以使用以下解决方法：

1. 更改正文字体，但按钮

为sofia

2. 删除按钮之间的空格并改为使用边距。有两种方法可以做到这一点： 1）在相邻的按钮之间没有准确的空格，或 2）使用HTML注释注释掉所有空格

<!-- No whitespace inbetween -->
<a class="btn"></a><a class="btn"></a>

<a class="btn"></a><!-- Or, comment it out
--><a class="btn></a>

1. 更改为块元素，设置宽度：自动，将它们全部浮动，然后为它们添加特定的边距。