基线与基线之间的距离

西安软件研发中心x西安软件研发中心x

决定普通行内盒子的高度

纯内联元素的可视高度完全由 line-height 决定

非替换元素的纯内联元素

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste officiis illum veritatis? Adipisci aspernatur repudiandae a omnis sit, excepturi, eius odit veritatis non quisquam aut aliquam architecto iusto aliquid placeat! Demo Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, molestias suscipit! A odit sunt aperiam iure officia quae possimus placeat! Hic cumque, libero voluptatum exercitationem officiis eligendi laboriosam esse laborum.

line-height 取值

数字，比如 1.5
长度，比如 1.5em，1.5rem
百分比，比如 150%
关键字：normal（大概1.2，与font-family有关）

下面三者有什么区别？

line-height: 150%
line-height: 1.5em
line-height: 1.5

line-height 的数字值

大多数情况下，推荐使用数字设置line-height，这不会在继承时产生不确定的结果。

Avoid unexpected results by using unitless line-height.

父级 line-height: 1.5em

子元素直接继承 1.5em * 15px = 22.5px

Avoid unexpected results by using unitless line-height.

父级 line-height: 150%

子元素直接继承 150% * 15px = 22.5px

Avoid unexpected results by using unitless line-height.

父级 line-height: 1.5

计算得到 1.5 * 30px = 45px

line-height: 1.5em 或 150% 是在把 line-height 在所设置的地方先计算出来，然后传递给子元素。子元素继承的是一个固定的值。
line-height: 1.5 是在把 line-height 的 1.5 继承下来，然后在当前元素再计算具体的值。子元素继承的是一个比例，然后可以根据自身具体font-size值再计算。