在span中字体下偏

Question

在一个span中写了端文字，发现字体相对于span所在的空间向下偏移，我用line-height设置居中也只是让span相对于父级居中了，但是里面的字体还是相对于span向下偏移，这是什么导致的.
但是我重写一个demo又不会发生这种情况。请各位指教。

    .header-nav{
      float: left;
      width: 200px;
      height: 40px;
      background-color: lightgrey;
      span{
        line-height: 40px;
        font-size: 20px;
        background-color: red;
      }
    }

Answer 1

文字对齐默认方式是基线对齐，即字母x的下边沿对齐。可以看看这个博客
链接

Answer 2

字母数字是基线对齐，汉字是底线对齐，四线=》底线、基线、中间线、顶线，有点类似于四线三格。你可以对比一下英文'good'和中文’好‘。

Answer 3

我只是给鱼了
textAlign: middle;

Answer 4

修改line-height(行距),把行距调成与div相同的高度就好了