-
行间距(行高)
- line-height属性指行的基线之间的距离,与字号无关,决定着元素所在方框的高度是增还是减。
- line-height控制的是行距(leading),是除字体高度之外在文本行上方的额外空间。也就是说line-height的值与字体高度之差就是行距。
- 对于块级元素而言,line-height定义元素中文本行基线之间的最小距离。定义的是最小距离,不是定死的值,基线之间的可能比line-height的值大。line-height不影响置换元素的布局,但是依然作用到置换元素上。
-
行的构成
- 文本行中的每个元素构成一个内容区(content area),其高度由字体的高度决定。随内容区出现的是一个行内框(inline box),如果不考虑其它因素,其高度由内容区完全相等。line-height导致的行距是影响行内框高度的因素之一。
- 元素的行距等于font-size的计算结果减去line-height的计算结果。这个值是行距的总值。注意,行距可能是负数。行距分两半,分别放到内容区的上部和下部。算上行距,得到的就是元素的行内框。
- 确定一行内容的高度全部行内框之后,行框也就确定了。行框恰好包围最高那个行内框的顶端和最低那个行内框的底端。
-
line-height的值
- 使用normal默认值时行之间的高度由用户代理计算。不用的用户代理计算出来的值可能不用,不过一般都是字体高度的1.2倍左右。因为行框的高度要比元素的字体尺寸大一些。
- line-height的值可以是长度量(如18px或2em),或是纯数字。em、ex和百分数相对于元素的font-size计算得来。
-
line-height的继承\
- 块级元素之间继承的行高有点复杂,从父元素继承行高值时(属性值不是纯数字时),根据父元素的字号计算,而不根据子元素计算。
- 当继承来自父元素的line-height(属性值不是纯数字)时可能会导致行高小、字号大的问题,可以给line-height属性设置纯数字的属性值,那么子元素继承的将是换算系数,而不是计算得到的值,纯数字将用到当前元素以及所有的子元素上,因此各元素的行高将根据自身的字号计算。
- 若是把line-height的值设为inherit,元素的行高将变成父元素行高的计算值。其实,这与让行高值自然继承没有什么区别,只不过是特指度和层叠解析会受影响。