CSS中line-height与height的区别？

Question

简单来说，line-height是行高的意思，height则是定义元素自身的高度。

例如下面这段代码
<div class="test">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

如果我们定义.test {line-height:20px;}，那么这个元素的实际高度将取决于其中内容的多少，假如文字部分在浏览器里面显示为一行，那么这个div的实际高度就是20px，如果文字显示为两行，那么div的实际高度就是40px，而且文字的行高是20px的；

如果我们定义.test{height:40px}，那么这个元素的实际高度一般并不会因为内容的多少而发生改变，如果文字显示为一行，那么这个div的高度仍然是40px，如果显示为2行，但是文字的行高不够20px，这个div的高度也不会因为文字内容的高度小于height而发生改变。不过如果文字内容的高度大于40px了，一般来说这个div的高度还是会相应增加的。

Answer 1

1：前者用来表示容器的高度，后者用来表示，这一容器内的每行文字的高度如：height一般用来表示，设置这一容器的高度。一般来说，如果是要设置文字行距和居中显示，都会带上line-height:40px;font-size:20px;这样的话，就相当于文字大小 20px，文字行间距离也有20px了。