line height - fangdiao/Notes GitHub Wiki
#深入理解line-height
####line-height定义
两行文字基线间的距离
####line-height与行内框盒子模型
1.内联元素的高度表面上由行高决定,但是高度的表现不是行高,是内容区域和行间距。内容区域+行间距=行高。
2.内容区域高度只与字号以及字体有关,与line-height没有任何关系。但是在simsun字体下,内容区域高度等于字体大小
####line-height属性值
1.normal:与浏览器,字体相关
2.:当前元素的font-size值大小的倍数作为行高值
3.:使用具体长度值作为行高值,em/rem/px/pt
4.:相对于设置了该行高属性的font-size的大小计算
5.inherit:框等元素的默认行高是normal,使用inherit可以使文本框样式可控性更强
####应用元素有差别
line-height:1.5/150%/1.5em
1.line-height:1.5;
所有可继承元素根据font-size重新计算行高
2.line-height:150%/1.5em;
根据当前元素font-size计算行高并继承给下面的元素
####行高实际应用
1.图片水平居中。
.box{line-height:;}
.box img{vertical-align:middle;}
2.多行文本垂直水平居中(原来与图片一样)
.box{line-height:;text-align:center;}
.box .text{display:inline-block;inline-height:normal;text-align:left;vertical-align:middle;}