刪除錨標籤之間的空間

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>