lline-height以数值为单位

Question

line-height:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数

.parent{border:1px solid red;
 line-height: 4;
  font-size: 14px; 
}

应当与下面等价吧

.parent{border:1px solid red;
 line-height: 56px;
  font-size: 14px; 
}

<span class="parent">char in parent
  <span class="child">
    <span class="inline-block">display:inline-block</span>
    char in child
  </span>   
</span>
<div class="other">other</div>

css1

*{margin:0px;padding:0px;}
.parent{border:1px solid red;
 line-height: 4;
  font-size: 14px; 
}
.child{
  font-size: 30px; vertical-align:bottom;border:1px solid red;
}
.inline-block{
  display: inline-block;vertical-align:bottom;
}
.other{
  border: solid 1px green;
}

显示效果

Answer 1

下表解释很明确

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

Answer 2

line-height:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数 这句话没错，
但是题主的child设置了font-size: 30px;
所以 child的行高在parent的行高设置了4的时候，是：4 * 30px = 120px