本文的重點是了解vertical-align和line-height的使用

涉及到的名詞：基線，底端，行內框，行框，行間距，替換元素及非替換元素，對齊。只有充分理解這些概念才會靈活運用這兩個屬性。

什麽是對齊

對齊一定是涉及兩個對象：對齊元素以及要對齊的對象；比如在軍訓時教官喊稍息，我們每個人都會有一個參照的標準去站齊。

而行內元素的對齊，除了行內元素本身，還有一個參考系，這個參考系就是行框的基線，而行框的基線依據於行內框元素的基線位置。

什麽是基線

每一個文本元素自身都會有四條線，頂線，中線，基線，底線。而基線一般是指文本元素中以x字母為準，x字母的下邊緣為該文本元素的基線。

而行高則是兩個文本行基線之間的距離，往往使段落產生間距。

但是也可以這樣理解，行高 = 字體大小 + 上半行距 + 下半行距（其中上下半行距相等，這個等式可以從圖中推導出來）

每一個文本元素和文本行元素，都會有一條基線，基線的位置受到文本的字體格式以及line-height的影響。

什麽是行框和行內框

   <span>span</span> text <em>em</em> <i>yuan</i>

在每一個段落行內，不同的行內元素除了包裹自身內容的內容框之外，還會自動生成一個行內框，其中沒有標簽包裹的文本會生成匿名行內框，不同的行內框會根據各自不同的line-height產生行間距，而行框則會剛好包括最高的頂端和最低的底端，從而來生成行框。

span{
              display: inline-block;
              width: 50px;
              line-height: 80px;
              background-color: darkcyan;
              font-size: 20px;
          }
        em{
            display: inline-block;
            width: 50px;
            line-height: 50px;
            background
 
-color: rebeccapurple;
        }
        i{
             display: inline-block;
             width: 50px;
             line-height: 30px;
             background-color: green;

        }

line-height 與vertical-align