inline-block下有关line-height、height和vertical-align的问题？

Question

<style>    
    .dib-baseline { 
      display: inline-block; 
      width: 50px; 
      height: 50px; 
      background-color: #f0f3f9;
      line-height: 100px;
      vertical-align: bottom 
    }
</style>
<div>
    <span class="dib-baseline">x</span>
</div>

当line-height的高度超出height高度时(如例子中的line-height: 100px;)，为什么有设置vertical-align时不能撑开父级高度，没设置vertical-align时可以撑开父级高度

Answer 1

因为...，所以...。
算了，讲不清楚，看看这篇文章就知道了。
CSS深入理解vertical-align和line-height的基友关系