Блог

Я создаю веб-сайт и добавил нижний колонтитул, содержащий ссылку на мой профиль на GitHub и репозиторий веб-сайта. У меня нижний колонтитул выглядит так, как я хочу, за исключением того, что ссылки расположены рядом друг с другом без каких-либо пробелов между ними. Я пытался добавить абзац с пробелами между ссылками, но тогда в нижнем колонтитуле было всего три отдельные строки. Как я могу добавить некоторый пробел между ссылками и сохранить их в одной строке.

Вот CSS и HTML для моего нижнего колонтитула:

 .footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}  

 <div class="footer">
 <a href="[github profile url]">GitHub Profile</a>
 <a href="[website repo link]">Website Repo</a>
</div>  

Обычно я разделяю подобные элементы, создавая класс для заполнения соответствующих элементов. Добавление отступов к элементам может уменьшить их пространство. Вы можете изменить размещение элемента в его родительском элементе с помощью различных « display » настроек, или использовать margin или даже border для размещения пробелов между элементами, или даже использовать columns в предоставленном пространстве, но заполнение кажется наиболее подходящим использованием.

 .footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}

.footer-links {
	padding: 0 10px 0 10px; /* padding-top, padding-right, padding-bottom, padding-left */
}  

 <div class="footer">
 <a class="footer-links" href="[github profile url]">GitHub Profile</a> /* add this class to each of your footer items */
 <a class="footer-links" href="[website repo link]">Website Repo</a>
</div>  

Ну, вы можете добиться интервала между ссылками, используя padding свойство. Например: поместите в ссылки классы с одинаковыми именами:

 <div class="footer">
 <a href="[github profile url]" class="footer__link">GitHub Profile</a>
 <a href="[website repo link]" class="footer__link">Website Repo</a>
</div>
  

а затем в CSS:

 .footer__link {
    padding-right: (your value --> it could be in px,em,rem etc.);
}
  

В подобных ситуациях мне нравится использовать flexbox. В этом случае я добавил опцию выравнивания по пробелу, но есть еще много вариантов. Смотрите https://www.w3schools.com/css/css3_flexbox.asp для получения дополнительной информации:

 .footer {
  position: fixed;
  display: flex;
  justify-content: space-around;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}  

 <div class="footer">
  <a href="[github profile url]">GitHub Profile</a>
  <a href="[website repo link]">Website Repo</a>
</div>  

просто используйте margin в вашем css вот так:

 .footer a:first-child{
  margin-right: 50px(change to how much you want);
}
  

Вы можете добавить отступы или поля с обеих сторон тега привязки.

 .footer a {
   padding: 0 10px; /**Or whatever value you want**/
}

/**OR**/

.footer a {
   margin: 0 10px; /**Or whatever value you want**/
}
```