line-hight-(行高)解析

行高定义：line-height属性是指文本行基线之间的距离。

顶线、中线、基线、底线概念

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。

行高就是上图中两条红线间的距离

em框、内容区、行内框、行框

em框：em框在字体中定义，也称为字符框（charater box）,有font-size定义

内容区：底线和顶线包裹的区域，即由元素中各字符的em框串起来构成的框。

行内框（inline box），这个框通过向内容区增加行间距来描述。对于非替换元素
，元素行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度。因为行间距不应用到替换元素。

行框（line box），这是包含该行中出现的行内框的最高点和最低点的最小框。

div文字垂直居中(多行)

This is a test.

This is a test.

效果图

元素对行高影响

行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。

This is a test

This is a test

行高的继承

如果父元素的line-height有单位（px、%，em）,那么继承的值则是换算后的一个具体的px级别的值,值是根据父元素的font-size值计算。

如果父元素的属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时子元素的line-height会根据本身的font-size值重新计算得到新的line-height 值。