子元素类型对父元素高度的影响？

<div class="outerbox1">
            <span style="line-height: 50px">这是外层元1</span>
 </div>

.outerbox1 {
                width: 600px;
                line-height: 300px;
                background-color: thistle;
            }

            .outerbox1 span {
                display: inline-block;    // 此处改成block，父元素高度有变化，为什么？
                /* display: block; */
                background-color: teal;
            }