vertical-align和line-height的基情

众所周知，vertical-align支持很多属性值，足足可以组成一个足球队了：

    /* 关键字值 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <长度> 值 */
vertical-align: 10em;
vertical-align: 4px;

/* <百分比> 值 */
vertical-align: 10%;

/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。举个简单的例子，如下CSS代码：

 {
    line-height: 30px;
    vertical-align: -10%;
  }

等同于：

{
  line-height: 30px;
  vertical-align: -3px;    /* = 30px * -10% */  
}