CODEWITHSUNDEEP
htmlcss
kakkeuno
kakkeuno

Reputation: 140

How to remove spacing between links in a div?

so I'm trying to create some links to different platforms but the spacing between the icons is in my opinion to big and I can't figure out how to decrease it. These are all "a"-tags inside the same div which contains the following styling:

body, html {
height: 100%;
background-color: #1d1d1d;
}

.link-div{
max-width: 1px;
position: absolute;
top: 10px;
margin-left: 10px;
}

These are icons from the font awesome site and the div also contains a font-size via inline-styling, if that matters. Changing that font-size will increase/decrease the size of the icons themselves but will keep the same relative distance between them. The icon classes do not have any separate styling except a couple of transitions/transforms.

If it matters this is what the structure looks like:

<head>
<script src="https://kit.fontawesome.com/d32f88a9a9.js" crossorigin="anonymous">
</script>
</head>
<body>
  <div class="link-div" style="font-size: 32px;">
    <a href="link-to-where-we're-going"><i class="fab fa-twitch fa-fw"></i></a>
    <a href="link-to-where-we're-going" target="_blank"><i class="fab fa-facebook-square fa-fw"></i></a>
  </div>
</body>

and all the styling for the icons looks like this:

.fa-twitch{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
}

.fa-twitch:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
.fa-facebook-square{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
}

.fa-facebook-square:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}

reference image

Upvotes: 0

Views: 246

Answers (3)

Warden330
Warden330

Reputation: 1042

Edited it with real icons so you can see how it looks as an example. I usually use a List for Icon-Columns.

.link-div ul{
  list-style: none;
}

.link-div ul li {
  height: 50px;
  margin: 0;
  padding: 0;
}

.link-div ul li a{
  font-size: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="link-div">
  <ul>
    <li><a href=""><i class="fab fa-twitter-square"></i></a></li>
    <li><a href=""><i class="fab fa-youtube-square"></i></a></li>
    <li><a href=""><i class="fab fa-instagram-square"></i></a></li>
  </ul>
</div>

Upvotes: 1

FluffyKitten
FluffyKitten

Reputation: 14312

The problem is with the line-height - if the line-height is larger than the icon then it is allocating more space to the icon which is resulting in the extra space. If you set the line-height to 1em for the a elements, it removes the space:

a { line-height: 1em; }

See it working below (I've also made them block elements to appear vertically like in your image, and added a border to the icons so you can see there's no space):

a { 
    line-height: 1em; 
    display: block;
}
.fa-twitch{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
border:1px solid #aaa;
}
.fa-twitch:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
.fa-facebook-square{
transition-duration: 200ms;
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
color: #bc04fb;
border:1px solid #aaa;
}

.fa-facebook-square:hover{
transition-duration: 200ms;
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
<script src="https://kit.fontawesome.com/d32f88a9a9.js" crossorigin="anonymous">
</script>
  <div class="link-div" style="font-size: 32px;">
    <a href="link-to-where-we're-going"><i class="fab fa-twitch fa-fw"></i></a>
    <a href="link-to-where-we're-going" target="_blank"><i class="fab fa-facebook-square fa-fw"></i></a>
  </div>

Upvotes: 1

Duncan Leung
Duncan Leung

Reputation: 152

Try adding this to your CSS:

.link-div a {
    margin: 0
    padding: 0
}

It should remove all padding and margins from your links.

Upvotes: 0

Related Questions