Как я могу получить пространство между этими значками?

#html #css #icons

#HTML #css #Значки

Вопрос:

 <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, я пытался использовать justify content с пробелом вокруг, но он распределяет их далеко друг от друга. Я также пытался поиграть с заполнением и полями, и, похоже, это ничего не делает. У меня неправильно настроен HTML или я делаю что-то не так с css?

1. Мы не сможем вам помочь, если вы не покажете код.

2. Я только что добавил его.

3. Один из самых простых способов — добавить margin для <a> элементов, которые у вас есть в CSS. Но эти элементы являются inline элементами, поэтому вам нужно сделать их нестрочными, сделав их блочными, встроенными блоками, встроенной таблицей и т.д. например: display: inline-block . Проверьте это для получения подробной информации developer.mozilla.org/en-US/docs/Web/CSS/margin .

Ответ №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>

Также есть много других способов сделать это, поэтому, если это не работает в вашей среде, это проблема с этим, и это не может быть отлажено здесь.

Ответ №2:

Добавить margin-right ко всему github классу. Но не нужно поле-правое github изображение в последнем <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>