删除锚标签之间的空间

Question

最有可能是一个非常快速的问题来回答，但我有一些麻烦，消除这些'我正在做的社会联系'之间的空白！还有一些麻烦让他们在'a'标签中间正确居中​​。我试过使用：margin：-30;或填充：-30尝试将标签贴近顶部，这不起作用！这里是我的代码，任何帮助或解释为什么这不起作用将是太棒了！谢谢！

#footer .footer-right { 
 
    float: right; 
 
    margin-right: 50px; 
 
    margin-top: 20px; 
 
} 
 

 
#footer .footer-right a { 
 
    height: 55px; 
 
    width: 55px; 
 
    text-align: center; 
 
    color: black; 
 
    padding: 5px 5px; 
 
    display: inline-block; 
 
    font-size: 3em; 
 
}

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

Answer 1

在使用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>