對於樣式表中的line-height屬性究竟會對元素產生什麼樣的影響,是乙個比較重要的問題,往往有我們使用了此屬性達到的一些效果,但它是通過怎麼的原理達到此效果總是比較模糊,line-height它本來的意思行高,但是設定元素高度可以使用height,為什麼什麼還需要專門用乙個line-height呢?這裡為了弄清這個問題,以這裡專門對它使用後元素的效果做個測試,看看它究竟是怎麼影響元素的,測試的**如下:
label行內
label行內塊
label塊
span行內
span行內塊
span塊
p行內不設定高度
行內參照
p塊不設定高度
p行內設定0.5倍高度
行內參照
p塊設定0.5倍高度
p行內設定1.5倍高度
行內參照
p塊設定1.5倍度高度
div行內
div塊
通過測試結果基本可以確定line-height它應該表表一行文字所佔據的從上到下的距離,但它對於表單型控制項等是不適用的,如果需要對控制項設定高度最好用padding而不是height與line-height這兩個個屬性在不同的瀏覽器上表現不一樣;對line-height對於那非控制項類的元素如:span,label,p,div等都是如此,尤其是將它們都設定為塊元素時表現是最為一致的,所有塊元素如果不設定高度基本line-height的值就是height的值,當height設定較小時,文字展示的位置不變只是邊界變了,此時就有可能使用文字超出邊界,當高度設定較大時,文字所在的位置還是不變只是下面多出了空白;
對行內元素不同的瀏覽器表現會有一些不一致,例如在ie中支援乙個所謂的inline-block可以使乙個非塊元素在乙個行上具有line-height的特性,但是其它瀏覽器並不支援此屬性,從面的結果可以看出對於乙個行內元素設定line-height沒有效果,但是如果將這個行內元素進行浮動處理此時的line-height的作用又會顯示出來.
關於line height設定
乙個小小屬性就有那麼多的學問，我們來一起了解一下關於line height設定 行高有五種設定方法inherit normal 百分比 固定大小 純數字 如果使用百分比的話，只會根據父元素font size來計算的行高，且它的子元素僅僅繼承父元素的行高，而不能根據自己的font size來計算的行高...
關於line height的一些理解
看張鑫旭的部落格關於line height的一些理解.結論 乙個沒有定義高度的盒子的高度是由其包裹的盒子lineboxes的最大line height決定.但是若line boxes沒有內容,即使該盒子自己定義了行高,也無法作用於自己的高度.div什麼也沒有顯示,在瀏覽器上.如果這樣 你好 div就...
textblock的LineHeight的調整
原文 textblock的lineheight的調整 在上面的 textblock控制項中允許huanhang，也就是說some 和 text將分行顯示，會發現some和text的行距，會很寬，要調整他們之間的行距，即便是設定 lineheight為50，發現調整的幅度也是很小，也無法縮小行距。如果...