學習過CSS肯定對line-height與vertical-align兩個屬性有印象；line-height用來設定行高，vertical-align用來設定文字垂直方向的對齊方式，兩種看似十分簡單，但是其應用及原理卻不簡單

line-height

line-height與內容

先思考個問題：預設的div元素高度為0，為什麼新增了文字之後，高度就有了？這個高度是由哪個屬性決定的？如果是span元素，高度又是又誰決定的呢？

如上圖所示，結果應該很明確了：影響div元素高度的是line-height屬性，影響span元素高度的是font-size屬性，更準確的說法應該是line-height決定塊狀元素的內容區域高度，而font-size影響行內元素的文字區域高度，這裡請記住內容區域與文字區域不是同一個概念。

line-height與x

我們這裡的x就是26個英文字母中的x。由於自身形態的一些特殊性，這個小小的不起眼的字母在CSS中是一個很重要的概念。
如基線base-line的定義就是：

字母x 的下邊緣（線）就是我們的基線。

vertical-align中的middle指的就是：

關於基線向上1/2的x高度對齊

而x的高度甚至作為一個尺寸單位，這個單位就是ex，就是指小寫字母x的高度。

veritcal-align

張鑫旭在《CSS世界》中一書中，將veritcal-align屬性值分為4類：

• 線類，如baseline（預設值）、top、middle、bottom；
• 文字類，如text-top、text-bottom；
• 上標下標類，如sub、super；
• 數值百分比類，如20px、2em、20%等。

這種劃分方法是根據屬性值的型別來劃分的，實際使用中感覺這樣的劃分方法不夠合理，如線類中的baseline、middle是受到元素font-size影響，而top、bottom卻是受到元素line-height影響；也就是說baseline、middle是子元素文字區域與父元素文字區域對齊，top、bottom是子元素內容區域與父元素內容區域對齊，不同的veritcal-align屬性值，影響其對齊效果的屬性都是不同的。

上圖顯示的是改變子元素line-height（內容區域）對對齊的影響，此外根據veritcal-align屬性值不同，子元素的內容區域、文字區域，父元素的內容區域、文字區域都會對對齊造成影響，設定百分比或相對尺寸更是會與font-size與line-height兩個屬性產生直接聯絡，可見簡單的vertical-align想要合理使用並不是那麼簡單的。

內容區域與文字區域

理解和正確使用line-height與vertical-align，首先要明確內容區域與文字區域的概念：

在一般情況下，可以認為font-size影響span，span內容大小即為文字區域，line-height影響div，div的內容大小即為內容區域。這裡要注意影響並不是簡單的font-size或line-height數值就決定區域的高度。

如上圖div元素的實際高度是43而不是40，這是因為div中的文字存在一個為ling-height值40px的內容區域，而span也存在一個ling-height值40px的內容區域，這兩個內容區域高度相等，但是vertical-align預設值為baseline，所以兩者之間是關於文字區域對齊的，文字區域兩者大小是不同的，即baselin所在位置不同，連線兩個高度相同矩形，介面不在同一個位置，自然兩者就無法對齊，父元素要包含這兩個元素，高度也就不可能只有40px。div包含圖片，底部出現空白也是因為這個原因了，圖片的底部就是baseline，div中存在幽靈節點，兩者基於baseline對齊造成了底部空白。

CSS中許多奇怪的現象都可以從概念的角度合理的去解釋，在初步學習CSS的使用之後，進一步理解學習CSS的概念是非常有必要的。