删除锚标签之间的空间

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>

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;