html - 在这种情况下如何使用字间距？

Question

.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.front-button span {
  word-spacing: 50px;
}

<div class="front-button">
  <span>
    <a href="#">CUSTOMIZE</a>
    <a href="#">DESIGNS</a>
    <a href="#">PLANS</a>
  </span>
  <a href="#">ABOUT US</a>
</div>

我想将自定义、设计、计划和关于我们的文本分开，但是当我使用字间距时，关于我们之间的空间也会变大。我尝试过使用 span ，但我不知道我是否正确使用它。

Answer 1

我相信使用margin会是一个更好的主意

.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.front-button a {
  margin-right: 50px;
}

<div class="front-button">
  <a href="#">CUSTOMIZE</a>
  <a href="#">DESIGNS</a>
  <a href="#">PLANS</a>
  <a href="#">ABOUT US</a>
</div>

Answer 2

实际上，您不想分隔单个单词，而是希望在锚 (a) 元素之间留出空间。所以给他们每个人一个左右边距。

.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.front-button a {
  margin: 0 20px;
}

<div class="front-button">
  <a href="#">CUSTOMIZE</a>
  <a href="#">DESIGNS</a>
  <a href="#">PLANS</a></span>
  <a href="#">ABOUT US</a>
</div>