子元素有line-height后，父元素的line-height高度问题

div中两个span，div和span都设置了line-height。

<div class="outerbox1">
        <span style="line-height: 21px;">这是外层元素的内部文字1</span>
        <span style="line-height: 50px;">这是外层元1</span> 
       
</div>
.outerbox1 {
        background-color:thistle;
        width: 600px;
        line-height: 300px;
        
        font-size: 16px;
    }
    .outerbox1 span {
        
        background-color: teal;
         vertical-align: bottom; 
    }

最终呈现效果是：

如果div只包含一个span，span和div也都设置了line-height

.outerbox1 {
        background-color:thistle;
        width: 600px;
        line-height: 300px;
        
        font-size: 16px;
    }
    .outerbox1 span {
        
        background-color: teal;
         vertical-align: bottom; 
    }
   <div class="outerbox1">
        
        <span style="line-height: 50px;">这是外层元1</span> 
       
    </div>
         
       
    </div>

结果是：

就因为多了一个span，导致父元素div的line-height不同的显示结果。这是为什么呢？