html - 为什么元素宽度与位置: relative?不同

Question

如果我从 anchor 元素中删除 position:relative; ，则所有元素都具有相同的宽度，但具有position: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

我总是发现内联元素在添加填充时表现得很奇怪，如果你只是将 anchor 设置为内联 block ，它也将解决你的问题:

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