为什么span标签的文字会超出盒子?

span标签我写在了粉色盒子内，但为什么文字会超出粉色盒子？我不理解，有懂的麻烦指点一下。还有文字怎么在粉色盒子里上下居中？

CSS代码如下：

.loginbar {
    height: 45px;
    padding-top: 24px;
    background-color: pink;
}

.loginbar span {
    margin-left: 15px;
    font-size: 20px;
}

HTML代码如下：

<div class="loginbar w">
     <img src="images/staff_index/logo.png" alt="">
     <span>大客户挽单系统（客服）</span>
 </div>

padding-top: 24px;把这个去掉

因为大盒子有padding，还固定死了高度

padding去掉，加上line-height:45px

去掉div的padding 把line-height: 45px; 放到span上