[toc] ## line-height定义 line-height行高的定义就是指两基线的间距， 也是纯文本时文本所撑开的父级容器高度(`content-area/em-box`+`上下半行间距`)。 ## line-height的组成  ### em-box与content-area em就是1em那个的em，1em等同于一个font-size大小。 需要注意的是可见的**文字图形区域**并**不一定**就等同于`em-box`。 对于汉字，1个汉字通常小于em-box（更小于content-area）。 对于英文，一些带尾巴的英文字符q或则g，其小尾巴通常在em-box范围外（但仍在content-area之内）。 **另外em-box(只受font-size影响)不等同于content-area(受font-size和font-family影响)** (通常内容区域高度要比em-box更高一些？) **但，** 当字体为宋体这种方方正正的字体时，内容区域和em-box可以看做是等价的（即被鼠标select后背景变蓝的区域） >示例  （白色区域为内容区域，黄色为半行间距，可以发现宋体的内容区域大小等于em-box，即font-size） 但我们改变字体  （font-size不再等于content-area，content-area比font-size大） 可以发现行间距是一个墙头草，在同一个行高下，即使font-size相同，行间距也可能是不一样大小的。 行间距的作用就是保证内容区域+行间距正好等于行高  ### 半行间距 `行距=line-height-font-size` 而半行间距即是其一半 平均分为两份后，再追加到em-box的顶部和底部就形成了行高。 >[info] 半行间距可以是负值，直接表现即是两行文字可以交错。 > ## line-height不会影响替换元素 ## line-height与垂直居中 行高之所以可以实现垂直居中，原因在于CSS中**行间距的上下等分机制**，So，换句话说，如果过行距的添加规则是在文字的上方或则下方，则行高是无法让文字垂直居中的。 ## line-height的属性值 normal 这个值的实际值是不固定的，不是1，而是根据字体变化而变化的 。。。 ## line-height的大值特性 ``` .box{ line-height:96px; } .box span{ line-height:20px; } ``` ``` .box{ line-height:20px; } .box span{ line-height:96px; } ``` 最终box的高度都为96px ## lineHeight顶点位置与border-box lineHegiht是从元素的content-box上边开始计算的 故如果设置border-box，常常就会出现下面这种情况  因为height，line-height一样，但设置了padding，故文字非但没有居中还下沉了（因为lineHeight顶点从content-box开始计算）