CSS教程：line-height屬性的繼承

<style type="text/css">
p {
    line-height:17px;
}
</style>

<div class="mdse-detail">
    <p>
        <strong style="font-size:30px">
            品牌：XZX<br />
            市場價：145元<br />
            顏色：黑色<br />
             面料：棉<br />
             尺碼：S  M  L<br />
             衣長：S 89  M 90   L 91<br />
             肩寬：S 35  M 36   L 37<br />
             胸圍：S 88  M 92   L 96<br />
            下擺：S 104 M 108  L 112<br />
     & nbsp;      袖長：S 17  M 17.5 L18<br />
             由於測量方法不同，誤差在2CM左右！
        </strong>
    </p>
</div>

你會發現上面例子的文字會重疊在一起！ 這是什麼原因呢？

由於.detail-content 中的 p 元素繼承了預設設置的全域樣式 line-height:17px，而自訂區塊又是由商家自訂，其內字體被設置為了 font-size:30px;（可能為任意值），根據 Inline formatting model，得知該文字的 line-box 高為 17px，多出的字體部分上下溢出，所以會出現字體重疊的現象。

那這個問題如何解決呢？

解決方案：我們給 .mdse-detail 下的 p 元素設定樣式屬性 line-height:1.4。

為什麼解決方案裡的 1.4 不帶單位？

元素的 line-height 屬性值會繼承父元素（或父項目）的 line-height 屬性值，如果屬性值有單位，則繼承的值是換算後具體的 px 值而非原始的值（比如：em、%），而如果屬性值沒有單位， 則瀏覽器會繼承數值（無單位），然後根據該元素的 font-size 值重新解析得到新的 line-height 值。 這個和 table 的 tr 設置 display 屬性有一點點類似（tr.style.display = 」;，IE 顯示 block，而 Firefox 等標準瀏覽器顯示 table-row）。

還有另外一個相對低效的方法，但也不失為一個快捷的解決方案：

.mdse-detail p * {
line-height:140%;
}