css中line-height与height区别是什么?

发布时间:2019-12-20编辑:脚本学堂
本文介绍了css中line-height与height的区别,需要的朋友参考下。

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的高度还是会相应增加的。