在这种情况下如何使用字间距？答案

【问题标题】：How do I use word-spacing in this type of situation?在这种情况下如何使用字间距？
【发布时间】：2021-11-28 14:06:09
【问题描述】：

.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，不知道用对了没有。

【问题讨论】：

你的问题是 <span> 开始标签放错了

标签： html css text word-spacing

【解决方案1】：

实际上，您不想分隔单个单词，而是希望在锚 (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>

【讨论】：

【解决方案2】：

我相信使用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>

【讨论】：

非常感谢！希望我能给你一个大拇指，但我没有足够的声誉，但很抱歉。