css DIV 内部添加文字下移问题

Question

如图所示，我在html添加了四个.numberItem的同级DIV。样式如下：
、

.numberItem{
        width:60px;
        height:100px;
        border:solid ;
        display:inline-block;
        font-size:50px;
        text-align:center;
    }

、
其中我在第一个DIV中添加了文字：
、

         <div class="numberItem">5</div>
         <div class="numberItem"></div>
         <div class="numberItem"></div>
         <div class="numberItem"></div>

、

得到的样式是这样的：

为什么会出现下移的情况呢?

Answer 1

这里首先要关注一个属性 vertical-align: baseline; 在没有定义的时候 vertical-align 默认值是 baseline ;
行内元素会根据 vertical-align 来进行垂直方向的对齐；
进一步就要需要知道空 div 的 baseline 默认在底部，而有了文字之后就根据文字的 baseline 确定；
而文字的 baseline

可以验证一下：