<em>元素后单词间距不足，求CSS有效解决方法

核心原因 #

斜体文字（尤其是衬线字体）的字形会向右延伸，视觉上和下一个单词紧凑挤在一起。而常规word-spacing仅作用于单词间的原生空格，无法针对斜体元素单独调整后续间距，这就是你之前尝试无效的核心原因。

可行解决方案 #

• 直接设置margin-right：这是最精准有效的方法，给<em>元素添加右侧外边距，数值可根据字体和需求调整：

  em {
    margin-right: 0.2em; /* 可按需修改数值，比如0.15em、0.3em */
  }
  

• 用padding-right替代：如果不想影响元素外部布局的间距，也可以使用内边距：

  em {
    padding-right: 0.2em;
  }
  

• 微调letter-spacing（谨慎使用）：若想轻微拉开斜体文字整体的松散度，可给<em>添加字母间距，但这会影响斜体内部的字母间距，不如margin精准：

  em {
    letter-spacing: 0.05em;
  }
  

为什么之前的尝试无效 #

• ::after伪元素加content: " "：浏览器会自动合并连续空格，伪元素的空格会和后续单词的原生空格合并成一个，无法增加额外间距；且word-spacing仅作用于原生单词间空格，对伪元素生成的空格不生效。
• 手动添加多个空格：HTML会自动合并所有连续空格，所以无论加多少都只会显示一个空格。

目前没有原生的word-spacing-right属性，使用margin或padding是最直接靠谱的方案。

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