line-height

根据MDN定义,对于块级元素，line-height决定了line-box的最小高度，而对于非替换行内元素，line-height用于计算line-box的高度。

     <div class="father">
         <span>hhhhhh</span>
     </div>

      .father{
          line-height:40px;
      }
      .son{
          line-height: 30px;
      }

span元素前面有一个幽灵空白节点，line-height继承了父元素的，为40px,作用在行框上，而span元素的line-height仅仅为30px,两者取大，所以30px被覆盖了。
line-height和font-size
当line-height＜font-size时，内联盒子的位置逐渐向文字中间靠近，当line-height=0时，内联盒子在文字中间靠上的位置。

        <div class="father">
         <span>aaa</span>
     </div>

     span{
          line-height:8px;
          font-size:10px;
      }

另外鼠标点击span元素获取到的是span元素的em-box。
行框的确定：先由每个盒子的line-height确定内联框和基线的位置关系，例如line-height=0时，内联框在基线的上方大约1/2 x-height，再根据vertical-align确定每个内联盒子垂直方向的位置，最后由最低和最高的盒子确定行框高度。
line-height加在所有内联元素上面（前面有个幽灵空白节点默认为内联元素）：

        <div class="father">aaaaa</div>
     <span class="justify">hhhhh</span>

    body{
         margin: 0;
         line-height:0;
     }
     .father{
         line-height: normal;
     }
      .justify{
          border-top:1px solid #ccc;
      }

line-height加在单独一个内联元素上面：

      .justify{
          border-top:1px solid #ccc;
          line-height:0;
      }

只利用line-height让文字与图标天然垂直对齐(必须让伪元素line-height=父元素图标height，或大或小都会影响图表的位置，利用line-height上下等分使得文字高度的一半与图标中心对齐，无论怎么改变font-size始终对齐。)

        <div class="father">
            <i></i><span>哈哈哈哈</span>
        </div>

     .father{
         line-height:20px;
         font-size: 80px;
         margin-top: 40px;
     }
     i{
        display: inline-block;
        width:20px;
        height:20px; 
        background: url(./image/喵.JPG);
         background-size: 100%;
         text-indent: -999em;
     }
     i::before{
         content: "fuck";
     }