去除锚标签之间的空间
这个问题在这里已经有了答案：
使用display: inline-block在元素之间引入一个边距。 给一个负的右边距以去除空间。
#footer .footer-right a {
height: 55px;
width: 55px;
text-align: center;
color: black;
padding: 5px 5px;
display: inline-block;
font-size: 3em;
margin-right: -4px;
}
保证金数额取决于父级的字体大小。
另一种方法是跳过结束标记。
<a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i>
<a href="#" class="github"><i class="fa fa-github" aria-hidden="true"></i>
<a href="#" class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i>
.footer-right {
margin-top: 20px;
}
.footer-right a {
height: 55px;
width: 55px;
text-align: center;
color: black;
padding: 5px 5px;
display: inline-block;
font-size: 3em;
margin-right: -4px;
}
.social-row{
text-align: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-right">
<div class="social-links">
<div class="social-row soc-row-1">
<a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="github"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
<div class="social-row">
<a href="#" class="stack-overflow"><i class="fa fa-stack-overflow" aria-hidden="true"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a>
</div>
</div>
</div>