为什么说简单谈谈呢？因为这篇文章就是从最简单的概念入手，总结一些使用场景和使用方法，浅入浅出，内容比较少，适合新手使用。
第一部分： 了解line-height(行高)
一 什么是行高
MDN上说：line-height CSS属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。这句话可以简单的理解为line-height就是一行文字所占据的高度。如果没有设置的话，行高就是略大于文字的font-size。如果设置了行高，并且大于字体的font-size,则会平均分配多余空间，文字在一行中间，出现所谓的行间距；另外行高越大，每行元素之间的间距越大。
二 行高和高度有什么关系
-
行高不会影响高度
-
行高影响的是行内元素和行内块级元素的垂直位置； 当我们设置了line-height之后，行内元素就会自动垂直居中，行内块级元素默认与行内元素的baseline对齐，所以位置也会变化；
-
我们可以使行高=高度，从而达到行内元素垂直居中的效果；
三 行高和基线有什么关系
第二部分： vertical-align
一 什么是vertical-align
vertical-align用于指定行内元素的垂直对齐方式，从这句话我们看到，这个属性和line-height的作用很相似。但其实他们的适用元素和适用条件有很大不同。
- 只有行内元素可以设置vertical-align,块级元素不可以。
这是因为vertical-align规定了某个元素在一行当中是如何显示的，如果本身为块级元素，自占一行，这个属性就不会起作用。
二 vertical-align的属性值
分为两种，下面介绍几种常见的属性值
第一种：相对于父元素的值
baseline:使元素的基线与父元素的基线对齐；
middle：使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐；
第二种：相对行的值
top: 使元素及其后代元素的顶部与整行的顶部对齐；
bottom: 使元素及其后代元素的底部与整行的底部对齐；
从属性值的作用范围我们可以看到，他是受困于包裹着的父元素的，和line-height不同，如果line-height设置的很大，从视觉上会超出父元素；
第三部分：测试总结
出几个简单的问题，测试一下自己有没有掌握这些内容
- 一个div中，既有图片又有文字，如何下边缘对齐；
- 文字如何垂直居中；
- 一个div中包裹一张图片和几个文字，图片设置vertical-align：top会有什么效果；
- 一个div中包裹一张图片和几个文字，图片大小为200px*200px,div的line-height设为400px，图片设置vertical-align:bottom，会有什么效果；
下面是参考答案
- vertical-align:bottom;
- vertical-align:middle或者设置line-height=height;
- 文字的上边缘会和图片上边缘对齐，因为图片的上边缘要和行的上边缘对齐，也就是文字的上边缘；
- 图片的下边缘在400px处，文字大约在200px处；
