line-height 属性介绍

最新推荐文章于 2023-11-10 15:25:27 发布

JeamKing

最新推荐文章于 2023-11-10 15:25:27 发布

阅读量2.1k

点赞数

分类专栏：前端技术文章标签： behavior div url firefox css 浏览器

本文链接：https://blog.csdn.net/JeamKing/article/details/5483127

版权

前端技术专栏收录该内容

34 篇文章 0 订阅

订阅专栏

line-height属性介绍

CSS2.0 手册中对该属性的介绍如下：

语法：

line-height : normal | length

取值：

normal : 默认值。默认行高

length : 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位

说明：

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。

假如一个格式化的行包括不止一个对象，则最大行高会被应用。在这种情况下，此属性不可以为负值。

此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为lineHeight 。

典型应用：line-height 使文本垂直居中

当指定line-height:100px 时，文本将默认以行高100px 的高度在垂直方向进行居中。

注意，用line-height
只对文字起作用，对于图片时失效。

line-height与 height 的影响

当元素设置了 line-height和 height 值后，其影响因为有浏览的差异而不同。

示例：

css:

.div1{

height:50px;

line-height:100px;

background-color:red;

}

.div2{

background-color:green;

height:20px;

}

html:

文本垂直居中

</div>

<divclass="div2"></div>

效果如下：

上图为Firefox 下的结果，从上图我们可以看出文本的垂直居中只和 line-height 的值有关系，根据 line-height 值大小垂直居中，line-height 值的设置不会改变元素的高度。

上图为 IE 下的结果，我们可以看出在 IE 浏览器下 line-height 值的大小对元素的高度会有影响。在本示例中我们指定 div1 的高度为 50 px，但是由于我们同时指定了 line-height 高度为 100px，结果 div1 的实际占用空间高度为 100 px。

JeamKing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录