line-height 的一个简单问题

Question

在写HTML和CSS的过程中，发现对line-height有些不明白。
HTML代码：

<div class="p">
  <span class="c">Color</span>
</div>

CSS代码：

*{
  margin:0;
  padding:0
 }
.c{
  color:white;
  font-size:20px;
  line-height:40px;
  background:orange;
  display:block
}

效果图：

代码都十分及其非常简单，span标签的高度是40px，但是我想问的是，假如将上面display:block这一行注释掉，这时候span标签的高度为auto，是22px，而div的高度却变成了40px，并且背景颜色的范围只包括span标签
问题：
为什么假如没有display:block这一句，光凭line-height为40px并没有将span标签的高度撑开？却把div的高度撑开到40px了？
链接：链接

Answer 1

span元素是行内元素，当你把display:block去掉的时候，span的display属性就变成了inline,inline属性的元素是无法设置宽高的，由元素内容决定的，但是line-height可以用来设置行内元素的高度，因此div会被撑到40px
line-height CSS 属性用于设置多行元素的空间量，比如文本。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的inline元素，它用于计算行盒（line box）的高度。

Answer 2

来看大神 张鑫旭 的文章：
css行高line-height的一些深入理解及应用

Answer 3

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

span默认是行内元素, div默认是块级元素

Answer 4

通俗点说：去掉display:block的span就是行内元素，你就把他看成一个文字，你给文字设置了行高，但是文字的大小是不会变的嘛，但是包着他的div确会给行高给撑到40了。