先貼上原文地址:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
什麼是行間距?
古時候我們使用印刷機來出來文字。印刷出來的每個字,都位於獨立的一個塊中。
行間距,即傳說中控制兩行文字垂直距離的東東。在CSS中,line-height被用來控制行與行之間垂直距離。
不過,行間距與半行間距,還是取決於CSS中的line-height。那麼,如何來使用line-height呢?
默認狀態,瀏覽器使用1.0-1.2 line-height, 這是一個初始值。你可以定義line-height屬性來覆蓋初始值:p{line-height:140%}
你可以有5種方式來定義line-height:
1.line-height可以被定義爲:body{line-height:normal;}
2.line-height可以被定義爲:body{line-height:inherit;}
3.line-height可以使用一個百分比的值body{line-height:120%;}
4.line-height可以被定義爲一個長度值(px,em等) body{line-height:25px;}
5.line-height也可以被定義爲純數字, body{line-height:1.2}
縮寫line-height
那5種line-height寫法,可以在font屬性中縮寫。line-height的值緊跟着font-size值使用斜槓分開,如:<font-size>/<line-height>
實例:body{font:100%/normal arial;} , body{font:100%/120% arial;} ,body{font:100%/1.2 arial;} ,body{font:100%/25px arial;}
計算line-height
有些CSS屬性是可繼承的(inherited),從層疊的元素裏傳遞下來。這樣做是爲了方便開發者,不再爲後代元素重新設值。
對於line-height繼承有點複雜。
1、百分比
2、長度
3、值:normal
4、純數字
(但實戰應用在中文字體或中英文字體混合,以及IE678,XP win7裏,行高規則又有所不同,淚流滿面)