Html `span`标记破坏了文本的垂直对齐？

当我在代码中使用

span

标记（根据文本内容更改文本背景）时，与在Android Chrome浏览器中打开代码时的背景相比，文本未垂直对齐。让它成为（JSFiddle），结果如下：

但是，当我删除

span

标记时，垂直对齐看起来非常好。让它成为（JSFiddle），结果如下：

不要被JSFIDLE预览窗口误导：首先，一定要放大它（在较小的窗口大小上看不到对齐不均衡），其次-JSFIDLE中的代码v.1将文本移动到背景的底部，而在Android Chrome上，相同的代码将文本移动到顶部（参见上面的屏幕截图）.

我不是在寻找什么：

• JavaScript解决方案-不适合我的情况
• 手动微调

  padding

  标记-问题显然在

  span

  标记中，而不是在padding中

这里是代码v.1:

。词性{
字体系列：Verdana，日内瓦，无衬线；
颜色：#fff；
字号：700；
边界半径：0.3em；
填料：0.1米0.2米0.1米；
字体大小：calc（0.4em+1.5vw）；
}
.名词{
背景色：#2196f3；
}
.形容词{
背景色：#ff9800；
}
.动词{
背景色：#4caf50；
}
.副词{
背景色：#f94432；
}
.连词{
背景色：#a047f9；
}

名词
形容词。
动词
副词。
康杰。

事实上，解决方案非常简单：每个

span

中都存在

div

之间的冲突。从

span

s中删除

div

-组件，并在常规div中添加span选择器，使代码正常工作：

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: calc(0.4em + 1.5vw);
}

.part_of_speech > span {
  padding: 0.1em 0.2em 0.1em;
  border-radius: 0.3em;
}

.noun {
  background-color: #2196f3;
}

.adjective {
  background-color: #ff9800;
}

.verb {
  background-color: #4caf50;
}

.adverb {
  background-color: #f94432;
}

.conjunction {
  background-color: #a047f9;
}

<div class="part_of_speech">
  <span class="noun">NOUN</span>
  <span class="adjective">ADJ.</span>
  <span class="verb">VERB</span>
  <span class="adverb">ADV.</span>
  <span class="conjunction">CONJ.</span>
</div>

。词性{
字体系列：Verdana，日内瓦，无衬线；
颜色：#fff；
字号：700；
字体大小：calc（0.4em+1.5vw）；
}
.词性>跨度{
填料：0.1米0.2米0.1米；
边界半径：0.3em；
}
.名词{
背景色：#2196f3；
}
.形容词{
背景色：#ff9800；
}
.动词{
背景色：#4caf50；
}
.副词{
背景色：#f94432；
}
.连词{
背景色：#a047f9；
}
名词
形容词。
动词
副词。
康杰。

本机

样式的

行高

或

垂直对齐

可能有问题吗？不看Android手机就很难调试，因为它在我的桌面Chrome上运行良好。PS：也许可以使用集成的StackOverflow snippets工具制作代码段，以便更容易地获取它们？您可以制作内部跨距

display:inline flex

我想它可能会解决这个问题。我已经在你的问题中添加了v1和v2的内联可运行代码示例，我觉得它们看起来完全一样。Sheraff，Alon Eitan-你能不能修改我的代码v.1（JSFIDLE允许保存更新的代码），以显示你的确切意思，因为我不确定我是否正确理解了你的意思。谢谢大家!@托马拉克-这是问题的核心。Android的结果看起来正好相反，我用截图演示了这一点。