（1）背景介绍：

在CSS任务中，我们经常会接触到line-height和vertical-align，面试中常常会问到line-hegiht的各种值代表的是什么意思，图片在div盒子里面底部为什么会留白等等问题。

（2）知识剖析：

line-height定义是什么：

 1.1 是指文本行基线baseline之间的垂直距离

 1.2 基线并不是汉字的下端沿，而是英文字母“x”的下端沿。

2.line-height的属性值有哪些

行高是可以被继承的，数字可以直接被继承，然后在计算行高；而百分比是先计算出行高，再以px继承。单位除了像素以外，行高都是文字大小的乘积。

1.vertical-align定义是什么：

1.1 使行内元素的基线相对于该元素所在行的基线的垂直对齐。

1.2 vertical-align默认对齐是baseline, 也就是基线对齐。

2.vertical-align属性有哪些：

2.1..vertical-align属性效果图：

（3）常见问题：

css中line-height:15px,line-height:1.5em,line-height:150%,line-height:1.5,有什么区别?

图像元素在块级元素底部为什么留有空白？如何解決。

（4）解决方案：

     css中line-height:15px,line-height:1.5em,line-height:150%,line-height:1.5,有什么区别?

1. line-height: 150%或者line-height: 1.5em，结果始终一样，其自身的行高等同，计算方式都是1.5*（当前元素实际的字体大小）其后代元素如果未另外设置行高便会继承元素A的行高大小

2. rem是直接找根元素html或者body设置的font-size的大小如果没有则浏览器的默认大小，所以显示为24px;

3 .line-height: 1.5，其自身的行高计算方式也简单，=1.5*（当前元素实际的字体大小），

   其后代的元素行高：

（1）如果后代的元素自己设置了行高则会使用自己的行高大小

（2）如果后代未设置行高，元素C只会将其1.5这个倍数继承给后代元素，不同后代的元素行高大小和其自身的实际字体大小相关，计算方式：（后代元素自身的字体大小*1.5） 

解决图片底部留白方法：

1.  设置img { display: block; }

2. 使用其他vertical-align值，例如bottom/middle/top

3. 直接修改line-height值，例如line-height：5px；

4. line-height为相对单位即假如为1.5或是百分数

5. 那么改font-size改为0也能控制

（5）编码实战：

   详情编码实战见视频。

（6）拓展思考：

图标底部留白的基本现象衍生：垂直居中。

当给图片设置高和line-height后，我们会发现只是近似居中。

x的中心位置都是在字符内容区域高度中心点的下方，而这上下的偏差就是这里图片上下间距的偏差。

 换句话说middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。

解决方法：可以设置font-size:0,或者flex;align-items: center;使其元素完全居中。

（7）参考文献：

CSS深入理解vertical-align和line-height的基友关系。

全面理解解析line-height:150%和line-height: 1.5em和line-height: 1.5rem和line-height: 1.5的区别