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"
}

原文连接