line-height與vertical-align：簡單的屬性不簡單

學習過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的概念是很是有必要的。