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