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

x007xyz發表於2018-05-20

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

line-height

line-height與內容

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

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

如上圖所示,結果應該很明確了:影響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

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屬性值,影響其對齊效果的屬性都是不同的。

middle屬性值不受line-height影響

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

內容區域與文字區域

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

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

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

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

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

相關文章