取值
一般情況下，瀏覽器默認的line-height為1.2。可以自定義 line-height 覆蓋這個初始值，那么該怎樣設置line-height呢？有以下5種方式：
| 值 | 描述 |
| normal | 默認。設置合理的行間距。 |
| number | 設置數字，此數字會與當前的字體尺寸相乘來設置行間距，即number為當前font-size的倍數。 |
| length | 設置固定的行間距。 |
| % | 基於當前字體尺寸的百分比行間距。 |
| inherit | 規定應該從父元素繼承 line-height 屬性的值。 |
繼承
需要提前說明的是：line-height的大小與font-size息息相關，除了指定line-height為多少px，剩下的設置方式都是基於font-size算出來的。 下面逐個講一講~
-
inherit 這個其實沒什么說的，繼承父元素
line-height的值，所以父元素的是多少就是多少。 如果其后代元素不設置line-height的話，也會是這個值。 -
length 假設設置 line-height 為20px，那么該行的該行的行高就是20px，與 font-size 無關，不會隨着 font-size 做相應比例的縮放。 這個長度值（20px）會被后代元素繼承，所有的后代元素會使用這個相同的、繼承的 line-height (20px)，除非后代元素設定 line-height 。
-
百分比 假設自身的 font-size 為16px，line-height 設為120%。那么其行高為：16 * 120% = 19.2px。即 line-height 是根據自身的 font-size 計算出來的。 子元素會繼承父元素的line-height，那么它繼承的是什么呢，百分比（120%）？還是19.2px？ 答案是后者，19.2px，即父元素
line-height計算后的最終值。 -
normal line-height 設置為 normal 的時候，行高取決於瀏覽器的解析，一般是1.2。 與前面不同的是，line-height 設置為 normal 的元素，其子元素不再繼承其line-height計算后的最終值，而是根據子元素自身的 font-size 進行計算。見下表~
| element | font-size | line-height | 計算后的lline-height |
| body | 16px | normal | 16px * 1.2 = 19.2px |
| h1 | 32px | normal | 32px * 1.2 = 38.4px |
可見，子元素隨着自身 font-size 的大小而做相應比例的縮放。
-
純數字 如果既想要 normal 的靈活，又想設置一個自定義的值，那就要用
純數字啦~ 純數字方式與 normal 唯一的不同，就是數值的大小，純數字可以自己隨意設定，而 normal 的值是瀏覽器決定的。
| element | font-size | line-height | 計算后的lline-height |
| body | 16px | 1.5 | 16px * 1.5 = 24px |
| h1 | 32px | 1.5 | 32px * 1.5 = 48px |
其后代元素會繼承這個數值（比如 1.5），然后根據自身的 font-size 算出自身的line-height。
繼承總結如下：
| 設置方式 | line-height | 計算后的line-height | 子元素繼承的line-height |
| inherit | 父元素的line-height值 | 不用計算 | 父元素的line-height值 |
| length | 20px | 不用計算 | 20px |
| %(font-size:16px) | 120% | 自身font-size (16px) * 120% = 19.2px | 繼承父元素計算后的line-height值 19.2px，而不是120% |
| normal(font-size:16px) | 1.2 | 自身font-size (16px) * 1.2 = 19.2px | 繼承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px |
| 純數字(font-size:16px) | 1.5 | 自身font-size (16px) * 1.5 = 24px | 繼承1.5，line-height = 自身font-size(32px) * 1.5 = 48px |
那么，哪一種是最好的方式呢？ 一般來數，設置行高的值為 純數字 是最推薦的方式，因為其會隨着對應的 font-size 而縮放。