一、line-height
line-height属性用于设置行间的距离(行高),例如文本。对于块级元素来说,它指定元素中线框的最小高度,对于未被替换的内联元素来说,line-height没有影响,如button或者其他input元素。(原文未提到,对于部分替代元素,line-height依然可以影响元素的样式布局)。
行间距的尺寸分配一般是line-height与font-size的计算值只差氛围两半,分别加到一个文本行内容的顶部和底部,可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box)
二、可能有的值
1.normol---默认值,设置合理的行间距(可自动调整行间距)
2.number---设置数字,此数字会与当前的字体尺寸相乘来设置行间距(这个可实现行间距永远等比例适应字体高度)
3.length---设置固定的行间距(将行间距设置为固定尺寸,无法随字体高度变化而变化,单位可以是px,em)
4.%---基于当前字体尺寸的百分比行间距(与字体高度等比例调整行间距)
5.inhert---规定应该从父元素继承line-height属性的值。
备注:行间距自动适应行高的方式,最好用的是采用number数值的方式
三、line-height的作用
首先,设置了line-height的行框line-box,具有的特性:
垂直居中:由定义可知,line-height是通过line-box行框来体现,line-box所包含的内容应为“文本+文本顶部+文本底部”,其中,文本顶部和文本地鼠是line-height与font-size差值得一半,所以,line-box与文本共用中基线,这也就是行高的垂直居中性。
import!
单行文字的垂直居中对齐,将line-height属性设置为所需要的行框高度,即line-height=height
多行文字的垂直居中对齐,若容器高度已知,也可直接通过设置上下padding相等就可以,但是当容器高度未知时,需要借助line-height来实现。需要将行框内的多行文本转化为内联元素,(设置display:inline-height),然后再单独设置内联元素的行间距,整个内联元素就在行框内垂直居中对齐了。
备注:通过line-height设置文本垂直对齐,如果设置元素垂直对齐,需使用vertical-align:middle
四、line-height:1.5 与150%的区别
150%时会根据父元素的字体大小先计算出行高然后再让子元素继承,而1.5是根据子元素的字体大小动态计算出行高值让子元素继承