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

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

我总是发现内联元素出现异常将填充添加到他们的时候，如果你只是做锚inline-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>

Answer 2

position:relative不是一个引起问题，但HTML的格式。试着这样写的：

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