line-height 取值方式

line-height 取值方式

相信不少前端er都使用過 line-height 來設置行高佈局。下面看看官方定義：

On block level elements, the line-height property specifies the minimum height of line boxes within the element.On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.

有時候咱們在開發的時候並無太深刻的去了解一個屬性，好比：line-height 的不一樣取值達到的效果並不一樣，下面依次看看經常使用的幾種取值方式。å

---

px 單位取值

line-height: 26px 目的就是直接定義目標元素的行高爲 26px 的高度。

---

% 百分比取值

line-height: 150% 通常用該方式定義目標元素的行高會配合 font-size: 14px 屬性使用，由於用百分比當前元素的行高爲 1.5 * 14px = 21px。且若是其層疊子元素沒有定義 line-height 屬性，無論有沒有定義 font-size 屬性，其層疊子元素行高均爲 21px（與自身的 font-size 沒有任何關係）。

---

倍數取值

line-height:1.5 用該方式通常也是配合 font:14px 屬性使用，可是對層疊子元素的影響效果並不一樣，若是層疊子元素沒有定義 line-height 屬性，可是定義了 font-size 屬性，那這些層疊子元素的行高爲繼承過來的 line-height 倍數值乘以自身的 font-size 屬性。

---

總結

通常狀況下，爲了更加方便及清晰的使用 line-height，使用倍數取值是最佳的設置方式，如：

body {
    font: 12px/1.5 tahoma,arial,"\5b8b\4f53"
}

原文連接