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会被撑到40pxline-height CSS 属性用于设置多行元素的空间量，比如文本。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的inline元素，它用于计算行盒（line box）的高度。