太困了，写篇文章清醒自己

line-height:

       
行高，顾名思义，就是一行的高度，这里的一行内容多半指的是一行文字，文字有本身的大小，所以行高就是一行整体的高度，将字体大小计算在内。行高减去字体大小，剩余高度平均填充到字体上边和下边。

       
行高，不是真正意义上的高度，但是它的确占据了那么高的空间，却不能使背景颜色填充到行高区域，这也就是为什么将高度和行高设置一样，实现一行元素的垂直居中：

height:100px;
line-height: 100px;

用法：

适用范围：

       
所有元素，对于块级元素，定义内部元素line-boxes最小高度；对于非替换元素，计算line-box的高度；对于替换元素（img,input,button）line-height没有效果（部分替换元素有效）

取值用法：

normal|<number>|<length>|<percentage>

计算方法：

       
相对于本身字体大小

能否继承：

       
可以继承

line-height继承时取值特性：

先继承，后作用

line-height: 2;
line-height: 2em;   //但是注意，em指的是父级元素字体大小

先计算，后继承：

line-height: 200%;

实例：

HTML:
    <div class="box number">
        <h1>标题的行高，这个line-height=30px*2=60px;</h1>
    </div>

    <div class="box length">
        <h1>标题的行高，这个line-height=15px*2=30px;</h1>
    </div>

    <div class="box percent">
        <h1>标题的行高，这个line-height=15px*200%=30px;</h1>
    </div>

CSS:
    .box {
        font-size: 15px;
    }
    h1 {
        font-size: 30px;
    }
    .number {
        line-height: 2;
    }
    .length {
        line-height: 2em;
    }
    .percent {
        line-height: 200%;
    }

       
结果解释：行高效果，相对于本身字体大小计算，但继承后的line-height有些不一样，特殊之处就是，line-height: 200%; 是先计算具体的line-height数值，再继承

最推荐写法：font: 20px/2，设置了字体大小，也设置了行高