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