css- vertical-align

vertical-align属性值有4类：

• 线类，如baseline（默认值）、top、bottom、middle；
• 文本类，如text-top、text-bottom；
• 上标下标类，如sub、super；
• 数值百分比类，如20px、2em、20%，百分比值相对于line-height计算。

vertical-align只能运用于内联元素，以及display为table-cell的元素；

‘幽灵空白节点’导致高度超过32px：

<div class="box"><span>文字</span></div>
.box{
    line-height:32px;
}
.box > span{
    font-size:24px;
}复制代码

解决：

<div class="box"><span>文字</span></div>
.box{
    line-height:32px;
    font-size:32px;

}
.box > span{
    
}
或者
.box{
    line-height:32px;
   

}
.box > span{
     font-size:24px;
     vertical-align:top;
}
复制代码

转载于:https://juejin.im/post/5b3c7b2b5188251b22101fd0