关于span高度过高，且文字脱离span盒子的原因

首先我们来看问题描述：

我设置的span标签时，当设置一个高度之后，发现本该在元素盒子内的文字在外面。

在这里插入图片描述

再看一下代码：

<div class = "commenter">
                        <img src = "background.png" class = "userImg"> 
                        <input type = "text" >
                        <input type = "text" value = "帅气的小朱哥" disabled class = "nameInput">

                    </div>

.commenter 
{
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    border-right:1px solid #90c52a;
    width:30%;
    line-height:250px;
}
.userImg 
{
    width:100%;
    height:50%;
}
.commenter span
{
    height:30px;
    width:25%;
    text-align:center;
    font-size:1.2em;
    margin:0 auto;
    padding:0;
    border:2px solid rgb(89,89,89);
}

在这里插入图片描述
在这里我给他设置了高度为30px，按理说应该是span元素盒子的高度为30px,文字在盒子内。但是，结果却是盒子高度正确，本该在内部的文字却在盒子外。如果不设置高度，结果如上图所示。
后来找到了原因，span元素继承了我给它的父元素的父元素设置的line-height值，也就是说，这就是由于CSS继承规则导致的。在CSS中，如果没有给后代元素设置样式覆盖祖元素中设置的样式，那么后代元素会默认继承未被覆盖的样式规则。
在这里插入图片描述
可以看到，当我给span元素加上一个line-height后，文本正常显示。