line-box、line-height、vertical-align

一、概念

line-box是指行内包裹元素的盒子，用于行内元素对齐的模型

二、组成示意图

line-box.png

line-box: 包裹元素的行内盒子
line-boxes：每一个子元素的行内盒子
content-boxes：内容区

三、特性

content-box的高度由内容决定。
line-box的line-height由cotent-box和padding决定的。（替换元素没有内容）
line-boxes中的content-box垂直居中
box的高度由line-box中最低的line-boxes的底部到最高的line-boxes的顶部决定
实际高度其实是line-height，不是height。
盒子的对齐方式默认是baseline（x字母的底部）

四、line-height

让文字在容器中垂直居中，通常使用height=line-height
那么为什么这样可以使文字垂直居中呢？
那是因为line-box中的content-box自动垂直居中，在只有一个line-boxes的情况下，line-box的实际高度是line-boxes的实际高度，所以，line-box中的文字居中在line-box。如果容器的高度height（line-box外面一层容器）等于line-box的高度line-height，那么文字就居中了。

五、vertical-align

• 对齐线的示意图

  
  
  

  textline.png
• vertical-align的默认值是baseline
• vertical-align只对水平元素起作用（inline，inline-block，table-cell）
• vertical-align的适用范围：
  • 父元素存在line-height(inline父元素由元素撑起line-height)也可以。子元素中的水平元素才起作用
  • 父元素不存在line-height，那么子元素中只有兄弟之间的对齐可以使用，不能用于在父元素垂直居中
• 应用
  当图片与文字在一行显示时，会发现图片下方有空白，这是因为vertical-align默认为baseline。图片的底部仅仅对齐到x字母的下方，并没有到容器的底部。
  决方法有很多，其中比较简单的方法就是将vertical-align设为middle，让它对齐中线。也可将Img变为block，那么对齐方式baseline失效，而块级元素充满容器。还有其它的方法，可参考【解决div里面img图片下方有空白的问题】

参考文章：
怎么应用vertical-align，才能生效？
深入理解CSS：line-height、vertical-align
css行高line-height的一些深入理解及应用