为什么元素宽度与位置不同：相对？

Question

如果我从锚元素中删除position: relative;，则所有元素都具有相同的宽度，但位置为：relative;它们的大小不同？

前2个元素~48px，第三个元素 - 〜44px。 我怎么解决它？

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";

a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #000;
  border: none;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  margin-right: 20px;
  outline: none;
  padding: 0.75em 0.75em 0.75em 0.75em;
  text-decoration: none;
  position: relative;
}

<a href="#">
    <i class="fa fa-fw fa-anchor"></i>
</a>

<a href="#">
    <i class="fa fa-fw fa-anchor"></i>
</a>

<a href="#">
    <i class="fa fa-fw fa-anchor"></i>
</a>

Answer 1

我总是发现内联元素在向它们添加填充时表现得很奇怪，如果你只是使锚点内联块，它也将解决你的问题：

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";

a {
  display:inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #000;
  border: none;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  margin-right: 20px;
  outline: none;
  padding: 0.75em 0.75em 0.75em 0.75em;
  text-decoration: none;
  position: relative;
}

<a href="#">
    <i class="fa fa-fw fa-anchor"></i>
</a>

<a href="#">
    <i class="fa fa-fw fa-anchor"></i>
</a>

<a href="#">
    <i class="fa fa-fw fa-anchor"></i>
</a>

Answer 2

position:relative不是导致问题的那个，而是HTML的格式。试着这样写：

＆＃13;

＆＃13;

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";
 a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #000;
  border: none;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  margin-right: 20px;
  outline: none;
  padding: 0.75em 0.75em 0.75em 0.75em;
  text-decoration: none;
  position: relative;
}

＆＃13;

<a href="#">
  <i class="fa fa-fw fa-anchor"></i></a>
<a href="#">
  <i class="fa fa-fw fa-anchor"></i></a>
<a href="#">
  <i class="fa fa-fw fa-anchor"></i></a>

＆＃13;

＆＃13;

＆＃13;