为什么指定为无单位数的行高值与数字+ px不同？

Question

在MDN中line-height: <number>表示：

  

使用的值是无单位<number>乘以元素自己的字体大小。计算的值与指定的<number>相同。在大多数情况下，这是设置line-height的首选方式，并避免因继承而导致意外结果。

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

4 * 14px = 56px

等于以下。

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

* {
  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;
}

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

我们将line-height:4更改为line-height:56px。

* {
  margin: 0px;
  padding: 0px;
}

.parent {
  border: 1px solid red;
  line-height: 56px;
  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;
}

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

为什么有不同的外观？