CSS line-hight ,vertical-align，父元素高度以及行框，行内框的关系

参考文章：我对CSS vertical-align的一些理解与认识（一）

                    css行高line-height的一些深入理解及应用

                    大小不固定的图片、多行文字的水平垂直居中

                   【line-height】 line-height详解

总结：

1.line-height 决定了此元素中的文字的排版，例如如果是多行文字，设置行高小于字体大小可以看到文字重叠（line-height  - 文字大小 = 行距），但文字大小不变，字体大小只是影响内容区，可替换元素设置line-height后没什么反应。

2.某元素的inline box(行内框)，受line-height以及其子元素影响，如果line-height设置的高度小于子元素形成的line box（行内存在图片撑开），子元素形成的line box（行框）就是该元素的inline box（行内框）；如果line-height大于子元素形成的line box则父元素的inline box就是line-height设置的inline box。

3.line box由该行每个元素的行内框来决定，最后取最高的inline box的 上边界和最低的inline box 元素的下边界分别作为line box的上下边界，而不是由各inline 元素 的line-height决定；并且父元素的line-height并不等于该行line box 的高度。

4.只有inline或inline-block元素可以设置vertical-align 属性，表示inline 元素垂直方向上的对齐方式；

4a. vertical-align:baseline表示与父元素（父元素的inline box）的baseline 对齐，父元素的baseline是由其内部字母x的下边缘决定；vertical-align : top/bottom表示该行元素的inline box上（下）边缘对齐后与父元素的top（bottom）对齐。(baseline,top,bottom是跟inline box相关的，而不是内容区)。

5.文字排版是根据line box来的，如果line box中存在可替换元素（图片），而该可替换元素的高度撑开了line box，那么line box 的高度会变大，而line-height还是原先设定的，此时，下一行文字会直接跑到下一行，而不去管line-height设定多少，此时，上下两行的文字可能就大于设定的line-height。

6.行内替换元素的width,height,padding,margin四个方向都正常显示，并且，margin/padding 设置可以改变行高；而行内非替换元素，margin只有水平方向可以正常显示，padding四个方向可以显示，但是垂直方向不占空间，所以显示的效果是会覆盖上面元素，同时，行内非替换元素的margin/padding设置不会改变行高line-height.