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>