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

Question

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;
        /* height: 200px; */
        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;
        /* height: 200px; */
        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不同的显示结果。这是为什么呢？

Answer 1

其实你这个和父元素的line-height没半毛钱关系，第一个会有错位，是两个子元素拥有自己的line-height，父元素继承的line-height被重写，而之所以错位，是由于两个line-height高度不同，又因为你设置了

vertical-align: bottom;

所以会错位。。。第二个单一的line-height，就是正常显示而已啊，和父元素Line-height莫有关系；

推荐你看看这篇文章：我脑中飘来飘去的css魔幻属性

Answer 2

...难道不是因为两个span元素的line-height不一样吗

Answer 3

开局一张图