子元素有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; 
    }

最终呈现效果是:
image.png

如果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>

结果是:
image.png

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

待解决 悬赏分:70 - 离问题结束还有 457天17小时41分51秒
反对 0举报 0 收藏 0

我来回答

回答3