關於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後，文本正常顯示。