How can I get space between these icons? - html

Question

<div class="icons">
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
</div>
Picture my icons and what they look like now -
As far as CSS goes I have tried using justify content with space around but it spreads them to far apart. I have also tried playing around with padding and margin and it does not not seem to be doing anything. Do I have the html not set up correctly or am I doing something wrong with the css?

Answer 1

Margins works pretty fine.
/* You can use this */
a:not(:last-of-type) {
margin-right: 10px;
}
/* Or this */
a:not(:last-of-type) img {
margin-right: 10px;
}
<div class="icons">
<a href="#">
<img src="//via.placeholder.com/64">
</a>
<a href="#">
<img src="//via.placeholder.com/64">
</a>
<a href="#">
<img src="//via.placeholder.com/64">
</a>
</div>
Also there are many other ways to do it, so if it is not working in your environment it's issue with that and that cannot be debugged here.

Answer 2

Add margin-right to all github class. But not need margin-right github img in last <a>". that is taken by
a:last-child .github{
margin-right:0px;
}
.github{
width:50px;
height:50px;
margin-right:10px;
}
.icons{
margin:20px auto;
text-align:center;
}
a:last-child .github{
margin-right:0px;
}
.github{
width:50px;
height:50px;
margin-right:10px;
}
<div class="icons">
<img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" />
<img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" />
<img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" />
</div>