首先我们来看问题描述：
我设置的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后，文本正常显示。
