css中的line-height

標籤：blog   http   2014   re   c   line   

之前用line-height一直都是為了讓文字置中，今天又重新學習了一下。

 

line-height，故名思議：行高。

設定行高會影響行框，行框就是line-height減去font-size的值平均分配到文字的頂部和底部，這就是為什麼設定line-height與height相同的時候，就垂直置中的原因。

看，藍色部分就是行框了。字型大小是18px，line-height設定的是36px。

 

line-height取值： 1）預設為normal

　　　　　　　　  2）number，此數字會與當前的字型尺寸相乘來設定行間距。

　　                   3）length，設定固定的行間距。

　　　                4）%百分比，基於當前字型尺寸的百分比行間距。和數字差不多，設定200%和設定數字2一樣。

　　　                5）inherit，任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。

 

line-height在各個瀏覽器的解析會有不同，但應該差距不多，ie6就不討論了。

另外line-height是可繼承的，可以只設定父元素，這樣看起來比較統一。