在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别。
基本概念
行高与行距从字面的意思是非常容易理解的,但是对布局和样式来说,我们应该更深入的理解各个属性之间的关系,比如line-height与font-size存在什么关系呢,line-height与所属元素的height又有什么联系呢?。好了,带着疑问,我们一同探究。
行高是指文本行基线间的垂直距离。 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高,上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距。
从上图我们就可以看出,行距、font-size与line-height之间的关系了吧。接下来进一步来看看这三者关系
当font-size等于line-height时,行距 = line-height - font-size = 0;而当font-size大于line-height时,则会出现行距为负值,则两行重叠,如下图:
行距 = line-height - font-size
CSS中起高度作用的应该就是height以及line-height。如果一个div不设置高度,里面也不设置字体高度,那么div的高度是由行高决定的。
line-height有五种取值
normal
取决于用户端。桌面浏览器(包括 Firefox)使用默认值,约为1.2,这取决于元素的 font-family。
<数字>
该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下,这是设置line-height的推荐方法,不会在继承时产生不确定的结果。
<长度>
指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果(见下面的例子)。
<百分比>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果(见下面第二个例子)。
继承
推荐使用数值