学习前端的同学都有遇到过line-height和vertical-align这两个属性，在印象中line-height无非就是用来设置行高，vertical-align用来设置行内元素垂直的对齐方式，但是最近在做任务的时候发现这两个属性比想象中的要复杂，这里记录一下我遇到的问题。
是什么撑开了高度？
通过上面的比较font-size改变的只是文字的大小，而文字的大小是不会撑开dom节点的高度。实现高度效果的是两个常用的属性两个css属性height和line-height，当标签同时存在height和line-height的时候，最后的高度是由height所决定的。对于line-heihgt来说，它会影响line boxes的高度
，而line-boxes则决定着我们标签的高度。
line boxes
line boxes是由一行中的多个inline boxes组成，对于每一行来说都会形成一个行框，line boxes的高度则是最高的inline boxes所决定。
（图片来自于网上）
line-height
line-height可以说是我们平常用的较多的一个属性，从字面上来讲行高可以理解成一行的高度，实际上它指的是两行文本基线的距离。基线可以理解成在写英文字母x的时候，x的底部就就和基线对齐。
图片中从上到下依次是顶线、中线、基线、底线。
行高（line-height）也就是两条红线（baseline）之间的距离，对于一文本行来说font-size决定了顶线到底线之间的距离，而line-height和font-size的差值称为行间距。
vertical-align
vertical-align是用来设置元素垂直对齐的方式。不知道有没有小伙伴和我一样，在刚刚开始学习的时候，总想着用vertical-align去实现垂直居中，发现怎么都没有效果。实际上vertical-align是用来指定行内元素（inline，inline-block）或表格单元格（table-cell）元素的对齐方式。这样一来，
display：table-cell;vertical-align:middle;也是一种不错的垂直居中的方式。
可以看到内联元素默认是基于基线对齐，也就是说当我们没有设置任何vertical-align的属性时，由于是基于baseline对齐的，往往达不到想要的效果。
当我们为图片添加vertical-align:text-bottom的时候，可以发现效果好了许多，但是实际上我们还需要根据需求来进行调整。通过上面的图片我们也可以发现，vertical-align这个属性只对设置该属性的元素起到效果，它并不会影响一行中其它的内联元素。
vertical-align所设置的值都是相对父元素的值，这些值使元素相对其父元素在垂直方向对齐。
小结
这些都是在学习line-height和vertical-align时候的一些理解，如果小伙伴们有发现不对的地方或者有更好的看法，欢迎大家提些建议和指导。
