前言
line-height (行高) 這個css屬性相信大家已經如數家珍，但說到它的繼承關系可能還是會有點模糊。
下面簡單總結了line-height在實際使用中的3種繼承場景，下面都以p元素的行高是多少舉例說明。
第一種：具體數值（子元素未設置具體行高數值，會自動繼承父元素的行高）
DEMO（下面代碼子元素p繼承了父元素的行高，行高為30px）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>line-height 繼承問題</title> <style> body { font-size: 20px; line-height: 30px; } p { font-size: 16px; color: #fff; background-color: #000; } </style> </head> <body> <p>我是行高</p> </body> </html>
第二種：按比例（子元素未設置行高，父元素行高為1.5或2）
DEMO（下面代碼子元素行高會先繼承父元素行高的1.5或2，然后和字體大小相乘）
注：p元素的行高為 24px或32px, 即 1.5*16 或 2*16
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>line-height 繼承問題</title> <style> body { font-size: 20px; line-height: 1.5 } p { font-size: 16px; color: #fff; background-color: #000; } </style> </head> <body> <p>我是行高</p> </body> </html>
第三種：百分比（子元素不會直接繼承父元素行高，而是等父元素字體大小*行高百分比后在繼承）
DEMO（下面代碼父元素的字體大小和行高相乘后的數值才會被子元素繼承）
注：此時子元素p的行高為40px，即20*200%
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>line-height 繼承問題</title> <style> body { font-size: 20px; line-height: 200% } p { font-size: 16px; color: #fff; background-color: #000; } </style> </head> <body> <p>我是行高</p> </body> </html>