Removing Space Between Anchor Tags

This question already has an answer here:

How do I remove the space between inline-block elements? 32 answers

---

On using display: inline-block introduces a margin between elements. Give a negative right margin to remove space.

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

Amount of margin depends on the font-size of parent.

Another method is to skip closing tag.

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

链接地址: http://www.djcxy.com/p/89250.html

上一篇: 我正尝试删除头部中不需要的空间

下一篇: 去除锚标签之间的空间