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;}