Css之line-height計算，cssline-height

Css之line-height計算，cssline-height

line-height表示行高，即兩行文字基準間的距離。

行框盒子 -> 內聯盒子(內嵌元素) -> 匿名內聯盒子(內容地區/文本/行內框)，依次包含，一行為一個行框，多行為多個行框累加。

行間距是兩行文字間，第一行文字底線到第二行文字頂線的距離。

半行間距，是行間距的一半。

行高 = 內容地區 + 行間距 ， (某些字型下，內容地區高度等於字型大小，如SimSun宋體)

一、區塊層級元素的高度和字型大小，沒有關係，是由行高撐開的

二、內嵌元素的高度是由字型大小撐開的，設定的行高不影響元素高度

三、兩行文字，設定行高，值越小，由於內容地區大小不變，則行間距越小，會出現重疊現象，行高最小為0。反之同理。

 

四、在塊級容器中，使內嵌元素垂直置中(只是看上去置中，實際上不是置中)的原理就是：

設定行高時，內容地區高度不變(一般由font-size和font-family決定)，半行間距分別增加/減少到內容地區的上下兩邊

                          

　　　　　　　　　　　　　　　　　　　　　　　　　　　(查看span時，IE瀏覽器有offset值，此值為41是因為沒有計算div的1px邊框)

 

 

參考資料：http://www.imooc.com/learn/403

　　　　　http://www.studyofnet.com/news/273.html

　　　　　http://www.jb51.net/css/199172.html