css使用不含單位的line-height 的方法

這篇文章主要介紹了關於css使用不帶單位的line-height 的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

line-height是可以繼承的，所以子元素可以不用重複定義line-height。我們通常也會在後面帶上單位（如:line-height:22px; 或是line-height:1.4em;），但line-height給人帶來麻煩的地方也是這個繼承和後面加的單位

有的時候，我們為了實現單行文字的垂直居中，會給line-height一個和height相同的固定的值；有的時候，我們為了調整特定的某段文字的行間距，通常會考慮使用百分比或相對尺寸的em。或許是習慣，於是我們都習慣了line-height是要有單位的。在這些情況下，我們都不需要考慮line-height的繼承，也不會發現任何問題。當然我們在使用line-height繼承的時候，就會發現問題的所在。
例如下面的程式碼： 

CSS：

<style> 
.line-height-test { width: 200px; line-height: 1.4em; font-size: 12px; } 
.line-height-test span { font-size: 30px; font-weight: bold; } 
</style>

HTML： 

<p class="line-height-test"> 
<span>白培铭先生于1960年出生于中国台湾，毕业于中国台湾省清华大学核物理系，</span> 
之后留学于美国加州大学伯克利分校和密西根大学，获得双硕士学位。在工作之后，凭着对营销领域的浓厚兴趣，他又考入密执安大学深造。 
</p>

如果line-height屬性值有單位，那麼繼承的值就是換算後的一個具體的px級別的值（先計算後繼承）；而如果屬性值沒有單位，則瀏覽器會直接繼承這個“因子（數值）”，而非計算後的具體值，此時它的line-height會依照本身的font-size值重新計算得到新的line-height 值（先繼承後再計算）。

例如有一p及子元素p，p的line-height為150%，由於預設的字體大小為16px，所以p的具體line-height值可換算為16px * 150% = 24px，由於p的line-height會繼承24px這個換算過後的具體值，此時p又被重新定義為font- size:30px;字體大小超過了line-height的大小，於是發生重疊。其它單位原理一樣。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於CSS background的使用方法

關於CSS中的table-cell屬性的使用方法

以上是css使用不含單位的line-height 的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！