深入解析vertical-align line-height属性

1.vertical-align

默认值：baseline 即设置该属性的元素的基线(baseline)与行框的基线对齐。W3C上描述的是与父级元素的基线对齐是不准确的，比如出现多行的情况。
生效的对象 : 只对inline,inline-block的元素有效，对块级元素无效。
继承性：无继承性
常用的值：
baseline :元素的基线与行框的基线对齐。
middle : 元素所在行内框的中线与行框的中线对齐。
top : 元素所在行内框的顶边与行框内高度最大的行内框顶部对齐
bottom : 元素所在行内框的底边与行框内高度最大的行内框底部对齐
固定值 : 元素的基线相对行框基线向上(为正值时)或向下((为负值时)偏移指定距离。
text-top :元素顶部与行框内的匿名文本的顶部对齐。
text-bottom :元素底部与行框内的匿名文本的底部对齐。
行内元素在布局时，首先也是最重要的是确定行框的基线位置。

2.line-height

line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高

line-height不会对inline-block的元素直接起作用，但可能会作用在inline-block的子元素上，这样间接改变inline-block高度
默认值:normal（大概是font-size的1.3倍）
应用于：所有元素
可继承
常用值：
固定值 ： 会被子元素继承这个定值
normal ：相当于数字1.3
百分数：相对于元素的font-size计算(font-size可继承)。这个值会被子元素继承下去(计算出来的定值)。
数字 ：相对于元素的font-size计算，但是子元素只会继承这个数字，然后根据自己的font-size计算各自的line-height

3.替换元素和非替换元素

替换：img input button textarea 自定义的inline-block
非替换 : i,a,span等

4.各种行内元素的基线与中线位置

Input框
基线位置 输入的字母x的底部，
middle线 位置， 包含margin之后这个行内框高度的中间。middle对齐时就是middle线与行框的x的中心对齐

Textarea ，img
基线位置 元素底部(含margin框哦) middle线位置 包含margin之后这个行内框高度的中间。

Button按钮
基线位置 里面字母x的底部，middle线位置，包含margin之后该行内框高度的中间 。

自定义inline-block
只有一行的inline-block 如果加上了overflow属性，其表现和 textarea img是一样(我也不知道原理是啥，input框基线位置不会受overflow影响) ，基线为包含margin之后该行内框高度的底部 。不加的话 基线位置 在里面字母x的底部
overflow只影响inline block的基线位置，middle线位置不管怎样都是 包含margin之后该行内框高度的中间

对于里面有多行的inline-block
没有overflow属性的情况下，基线位置 这个inline-block里最后一行(如果只有一行，那这行就是最后一行)的行框里面的x的底部 ，不管这个inline block是否定高，内容是否溢出, 也就是说就算里面的内容超出了block的边界，基线位置还是最后一行的x的底部。
设置了overflow属性之后，基线位置和单行时的情况是一样的。
middle线的位置为包含margin之后该行内框高度的中间 。

Inline元素
这里我把由display为inline的标签包裹的字体形成的盒子，称为字体盒子(自己起的名字)，像这种xxx ，在chrome中检查元素，包裹字体的蓝色块就是个字体盒子。字体盒子的高度只和font-size有关，默认大概为font-size的1.3倍，在span里面改变line-height,字体盒子的高度不会变化，但是注意虽然字体盒子的高度没变，但是字体盒子所在的inline box的高度是变了的(line-height改变的)，我们用眼睛看不到这个高度的。字体盒子的高度的中间线和该inline box的高度中间线是重合的，也就是说字体盒子是在inline box的中间的，并不是文字在中间，因为字体盒子的中间并不是文字的中间 。像这种inline元素的基线位置在字母x的底部，middle线在这个inline box高度的中间，也是这个字体盒子的中间（不是字体的中间），因为无论line-height比字体盒子高度大还是小，它的中间线和字体盒子的中间线都是重合的。

在进行行内元素布局时，每个inline box会根据自己的vertical-align去找参照物对齐。然后计算最高的inline box的顶部和最低的inline box的底部间的距离,这就是这行的高度了。

行框的middle就是确定基线的那个x的中线(过中心交点的平行线)
关于这些只在chrome上试过，其他浏览器规则是否一样有待试验。

用来测试的代码

    
    


    
xX

textarea
    x  x
    x
x
    xx

感谢：
深入了解css的行高Line Height属性
深入理解line-height与vertical-align
我对CSS vertical-align的一些理解与认识（一）
CSS深入理解vertical-align和line-height的基友关系