Html 字母间距错误文本中心对齐

我注意到在使用字母间距和文本对齐时有一种奇怪的行为：居中对齐。
增加空间，使文本更靠近元素的左边距

HTML

<div>
  <p>- Foo Bar Zan -</p>
</div>

-富巴赞-

CSS

div {
  width: 400px;
  height:400px;
  background-color: #3b0d3b;
  text-align:center;
  margin:auto;
}

p {
  color:#fff;
  margin-top: 40px;
  text-align:center;
  padding-top:30px;
  font-size: 1.2em;
  letter-spacing:.9em;  <--- Here is the problem
}

div{
宽度：400px；
高度：400px；
背景色：#3b0d3b；
文本对齐：居中；
保证金：自动；
}
p{
颜色：#fff；
边缘顶端：40px；
文本对齐：居中；
填充顶部：30px；
字体大小：1.2米；
字母间距：.9em；似乎需要将文本缩进与字母间距相同的量。第一个字母的左侧没有应用间距


div{
宽度：400px；
高度：400px；
背景色：#3b0d3b；
文本对齐：居中；
保证金：自动；
}
p{
颜色：#fff；
背景：黑色；
文本对齐：居中；
字体大小：1.2米；
填充：0；
保证金：0；
}
.间距{
字母间距：.4em；
}
.间距大{
字母间距：0.9em；
文本对齐：居中；
文本缩进：0.9em；
}

-富巴赞-

-Foo-Bar-Zan-
-Foo Bar Zan-
如果你仔细看，没有字母间距的顶部也没有正确居中。我唯一能想到的是用
左边距：15px
将其修补如下：

p { margin-left: 15px; }

如果文本放在两行上，使用填充会更安全。文本缩进只会缩进文本的第一行

p { 
  padding-left: 0.9em; 
}

设置与字母间距相同的负边距。因此，如果字母间距为10px，请将
右边距设置为：-10px

使用
文本缩进
将在第一个字母前面留下空格，即使父元素太小而无法容纳内容，也会导致其看起来不居中。
此行为是因为在最右侧字母的右侧添加了额外的空格（由于增加了字母间距）

在这种情况下，有一种更简单的方法来实现中心对齐。只需从最后一个字母表中删除字母间距属性

这里有一个解决方案


div{
宽度：400px；
高度：400px；
背景色：#3b0d3b；
文本对齐：居中；
保证金：自动；
}
p{
颜色：#fff；
边缘顶端：40px；
文本对齐：居中；
填充顶部：30px；
字体大小：1.2米；
}
.间距{
字母间距：.4em；
}
.间距大{
字母间距：.9em；
}

-富巴赞-

-Foo-Bar-Zan-
-Foo Bar Zan-
我找到的解决字母间距词偏离中心的最佳答案是简单地将
放在单词的前面。
我不明白。问题出在哪里？文本没有居中。左破折号比右破折号更靠近左边距。@n如果你仔细看，文本没有居中p one也不居中…所以对我来说它看起来像一个bug。至少它在不同浏览器中是一致的。我猜这是因为用不同的字母间距对齐段落更容易？在我看来，间距调整只在字符的右侧进行。因此，如果增加字母间距，它不会在左侧追加空格字符的侧面与右侧同时出现。我正在尝试查看是否可以将flexbox应用于单词中的字符，唉，我还没有找到一种方法。当您始终使用文本对齐时，这很好：以文本为中心，但如果某些文本也左对齐，文本缩进将导致问题。这是一种不受欢迎的贡献，更好呃解决方案在我看来/案例这不起作用，因为你在文本左侧引入了空格和字母间距，这比文本右侧的字母间距要大。所以现在你的“居中”文本离右侧太远了。