CSS调整letter-spacing时word-spacing自动变化？该现象是否被认可？

这是符合CSS规范的公认行为，但并不是word-spacing属性被自动调整了——本质是你混淆了letter-spacing的作用范围和word-spacing的定义：

• letter-spacing作用于所有字符（包括空格字符）之间的间距，它会在每个字符（含空格）的右侧额外添加指定间距。所以当你给容器设置letter-spacing时，单词之间的空格字符也会被这个属性影响，视觉上的词间距会随letter-spacing的增减成比例变化。
• word-spacing的作用是在单词之间的空格基础上，额外添加的间距，它本身不会被letter-spacing修改，你可以通过浏览器开发者工具查看元素的计算样式，会发现word-spacing始终保持默认的normal值。

你在CorelDRAW等设计软件里的体验不同，是因为这类软件的“字间距”通常仅作用于非空格字符，而“词间距”单独控制空格的宽度，和CSS的属性定义逻辑不一样。

验证示例 #

你提供的代码里，单词间的空格属于容器元素（h1/h2/h3）的内容，会被letter-spacing影响。如果要让空格不受letter-spacing影响，可以把空格单独放在不受该样式作用的元素里，比如：

<!DOCTYPE html>
<html>
<head>
<style>
h1{
  letter-spacing: 20px;
  font-size: 20px;
}

h2 {
  letter-spacing: 10px;
  font-size: 20px;
}

h3 {
  letter-spacing: 5px;
  font-size: 20px;
}
span {
  border-style: solid;
}
.space {
  letter-spacing: 0;
}
</style>
</head>
<body>

<h1><span>This</span><span class="space"> </span><span>is</span><span class="space"> </span><span>heading</span><span class="space"> </span><span>1</span></h1>
<h2><span>This</span><span class="space"> </span><span>is</span><span class="space"> </span><span>heading</span><span class="space"> </span><span>2</span></h2>
<h3><span>This</span><span class="space"> </span><span>is</span><span class="space"> </span><span>heading</span><span class="space"> </span><span>3</span></h3>

</body>
</html>

此时所有单词间的空格宽度一致，不会随letter-spacing变化，就能直观看到两者的区别。

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