如何在这些图标之间获得空间？答案

【问题标题】：How can I get space between these icons?如何在这些图标之间获得空间？
【发布时间】：2020-09-11 17:55:37
【问题描述】：

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

想象一下我的图标以及它们现在的样子 -

就 CSS 而言，我尝试过使用带有空格的对齐内容，但它会将它们分散到很远的地方。我也尝试过使用填充和边距，但它似乎没有做任何事情。是我的 html 设置不正确还是我的 css 有问题？

【问题讨论】：

如果您不显示代码，我们将无法帮助您。
我刚加了。
一种最简单的方法是为 CSS 中的 <a> 元素添加 margin。但是这些元素是inline 元素，因此您需要通过使它们成为块、内联块、内联表等来使它们非内联。例如：display: inline-block。详情请查看developer.mozilla.org/en-US/docs/Web/CSS/margin。

标签： html css icons

【解决方案1】：

边距效果很好。

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

还有很多其他方法可以做到这一点，所以如果它不能在您的环境中工作，那就是问题所在，无法在此处进行调试。

【讨论】：

在我的 css 上，我只有 .icons，所以我添加了 .github，然后边距工作得很好。谢谢。
1 用于使用a:not(:last-of-type)

【解决方案2】：

将margin-right 添加到所有github 类。但不需要margin-right github img in last <a>"。这是由

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">
    <a href="#"><img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" /></a> 
    <a href="#"><img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" /></a>
    <a href="#"><img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" /></a>
</div>

【讨论】：