如何理解vertical-align与line-height？
1.背景介绍
随着互联网的快速发展，人们对网页美化的追求也达到了一个新的高度，为了使网页更好看，我们需要精确控制行内元素的的位置，如此，本节我们就来讨论一下文字的两个属性：line-height和vertical-align。
2.知识剖析
2.1 line-height基本概念
定义：行高是指文本行基线（base line）之间的垂直距离，也可以是中线之间的距离，其实只要是两行文字中相同位置的距离都可以表示line-hieght。
2.2 line-height属性可赋值
注意：1、行高是可以被继承的，数字可以直接被继承，然后再计算行高；而百分比是先计算出行高，再以px继承。
2、行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。
2.3 行高的计算与继承
1、以em和百分比为单位的行高，其基数是元素本身的字体尺寸。
2、行高可以设定得比字体高度小，此时多行的文字将叠加到一起。
3、行高是可继承的，但是继承的是计算值，为了避免这种情况，可以为每个元素单独定义行高，但是这样很烦琐，因此可以定义 一个没有单位的实数值作为缩放因子来统一控制行高，缩放因子是直接继承的，而不是继承计算值。例如修改上例中的行高 为：“p { line-height : 1; }。
3.vertical-align基本概念与应用
3.1定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐。
这个概念其实是相对vertical-align的默认值(baseline)来说的，vertical-align其实定义的是行内元素垂直方向的对齐方式。
3.2 vertical-align的值
vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。允许设置负值。此处需要特别注意的是：垂直对齐属性只对行内元素有效。
4.图像元素在块级元素底部为什么留有空白？
解决方案：vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘。直接修改父级line-height值为0；设置为display：block；设置vertical-align：top/middle/bottom。
5.视频资料
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
