css line-height值為150%或1.5值的差異

下面css欄位跟大家介紹一下line-height:150%與line-height:1.5的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

（推薦教學：CSS影片教學）

這是一個小小的不經意的問題，但是卻常常被一些面試官提起。一般都會一下子進入懵逼狀態，那讓我們來看看差異在哪裡？

我先新建一個html,程式碼如下：

<p style="line-height:150%;font-size:16px;">
  　　　　　　　　 父元素内容
  　　　　　　　　
  <p style="font-size:30px;">
    　　　　　　　　Web前端开发<br/>
    　　　　 　　　line-height行高问题
    　　　　　　　　
  </p>
</p>

下圖是當line-height:150%的效果，父元素的行高為150%時，會根據父元素的字體大小先計算出行高值再讓子元素繼承。所以當line-height:150%時，字元素的行高等於16px * 150% = 24px：

#下圖是當

#下圖是當

#下圖是當

#下圖是當

下圖是當# line-height:1.5em的效果，父元素的行高為150%時，會根據父元素的字體大小先計算出行高值然後再讓子元素繼承。所以當line-height:1.5em時，子元素的行高等於16px * 1.5em = 24px：

###################下圖是當#############下圖是當#############下圖是當#############下圖是當############下圖是當# line-height:1.5的效果，父元素行高為1.5時，會根據子元素的字體大小動態計算出行高值讓子元素繼承。所以，當line-height:1.5時，子元素行高等於30px * 1.5 = 45px：###########################更多程式相關知識，###############更多程式相關知識，#########更多程式相關知識，#########更多程式相關知識，########更多程式相關知識，######。請造訪：###程式設計學習網站###！ ！ ###

以上是css line-height值為150%或1.5值的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！