css中line-height的深入理解

語法： 
line-height : normal | length 
參數： 
normal : 　預設高
length : 　百分比數字| 由浮點數字和單位識別碼組成的長度值，允許為負值。其百分比取值是基於字體的高度尺寸。請參閱長度單位 
說明： 
檢索或設定物件的行高。即字體最底端與字體內部頂端的距離。
如行內包含多個對象，則應用最大行高。此時行高不可為負值。 
對應的腳本特性為lineHeight。請參閱我所寫的其他書目。 
範例： 

div {line-height:6px; } 
div {line-height:10.5; }

CSS中line-height與height的差別？

簡單來說，line-height是行高的意思，height是定義元素本身的高度。
例如下面這段程式碼
410e38985a3c1e8b5219c50cd6add5b9文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字< ;/div>
如果我們定義.test {line-height:20px;}，那麼這個元素的實際高度將取決於其中內容的多少，假如文字部分在瀏覽器裡面顯示為一行，那麼這個div的實際高度就是20px，如果文字顯示為兩行，那麼div的實際高度就是40px，而且文字的行高是20px的；
如果我們定義.test{height:40px}，那麼這個元素的實際高度一般並不會因為內容的多寡而改變，如果文字顯示為一行，那麼這個div的高度仍然是40px，如果顯示為2行，但是文字的行高不夠20px，這個div的高度也不會因為文字內容的高度小於height而改變。不過如果文字內容的高度大於40px了，一般來說這個div的高度還是會相應增加的。

line-height與line boxes高度
css中起高度作用的應該就是height以及line-height了吧！如果一個標籤沒有定義height屬性(包括百分比高度)，那麼其最終表現的高度一定是由line-height起作用，即使是IE6下11像素左右預設高度bug也是如此。待我慢慢敘來。

先說一個大家都熟知的現象，有一個空的div，dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68，如果沒有設定至少大於1像素高度height值時，該div的高度就是個0 。如果該div裡面打入了一個空格或是文字，則此div就會有一個高度。那您思考過沒有，為什麼div裡面有文字後會有高度呢？

這是一個看起來很簡單的問題，是理解line-height非常重要的問題。可能有人會跟認為是：文字撐開的！文字佔據空間，自然將div撐開。我一開始也是這樣理解的，但事實上，深入理解inline模型後，我發現，根本不是文字撐開了div的高度，而是line-height！

line-height的注意

1.用line-height只對文字起作用對於圖片時失效
2.用dreamweaver 可以看到即時的line-height 的效果
3.該值不能使用負值，使用了也無效的
需要注意的是,在各瀏覽器下對於line- height的解決也是有細微的區別的,上下會有1px的差別,如果行高是偶數的話,大部分瀏覽器解釋還是比較正常,如果是奇數的話,有些瀏覽器會上比下多1px,而另有些瀏覽器會下比上多1px,對於有些要求比較嚴格的網站,建議行高設計時用偶數

以上是css中line-height的深入理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！