如何在该场景下正确使用word-spacing调整链接间距？

你遇到的问题本质是word-spacing属性的作用范围问题：该属性会调整元素内所有文本的单词间距，不仅会作用于不同链接之间的空白字符，也会作用于单个链接内部多个单词（比如ABOUT US就是两个独立单词）之间的间隔，所以才会出现非预期的效果。你用span包裹前三个链接的用法本身是没问题的，只是选择了不合适的间距控制属性。

以下是两种可直接使用的解决方案： #

方案1：使用margin控制链接间距（兼容性好） #

删除原有设置word-spacing的CSS规则，改为给链接元素添加外边距控制间距，原有HTML代码无需修改：

.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;
  /* 可选配置：继承文字颜色、去掉下划线 */
  color: inherit;
  text-decoration: none;
}

/* 移除最后一个链接的多余右间距 */
.front-button a:last-child {
  margin-right: 0;
}

方案2：使用flex布局的gap属性（写法更简洁） #

如果不需要兼容非常老旧的浏览器，直接给父容器开启flex布局，用gap控制元素间距，完全不会影响元素内部的文本格式：

.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center; /* 子元素垂直对齐 */
  gap: 50px; /* 仅控制子元素之间的外部间距，不会作用于元素内部文本 */
}

/* 可选：继承链接颜色、去掉下划线 */
.front-button a {
  color: inherit;
  text-decoration: none;
}

内容的提问来源于stack exchange，提问作者woopwoop