html - 分隔网页页脚中的超链接

Question

我正在制作一个网站，并添加了一个页脚，其中包含指向我的 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>

Answer 1

我通常通过创建一个类来填充有问题的元素来分离这样的元素。向元素添加填充可以将它们隔开。您可以使用各种“display”设置更改元素在其父元素中的位置，或者使用 margin 甚至 border 在事物之间放置空间，甚至在提供的空间中使用 columns，但 padding 似乎是最合适的用法。

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