简单来说,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的高度还是会相应增加的。
CSS中line-height与height
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 参考文章:深入了解CSS的line-height属性Vertical-Align: 你需要知道的所有事【译】Ver...
- line-height是定义块级标签内元素到行顶部的距离。使用此属性前提是要设定height属性且大于16px v...