line-height设置具体的像素值子元素继承关系的计算

Question

我在学习line-height的时候，知道子元素是可以继承父级元素的line-height的，也能理解当父级元素设置line-height的单位分别为em和百分比的换算情况。

但是当父级元素设置line-height为具体的像素值，子元素只设置字体的大小，我分别将子元素变为Inline和inline-block的时候发现子元素占用的内容区域会发生变化。想了解下当父级的line-height为具体的像素值，子元素继承的line-height有具体的一个计算规则么

codepen地址看这里

看下面的一个代码结构

<div class="test2">
  <span>我是最棒的你是最棒的</span>
</div>

css的代码如下

.test2 {
  line-height: 30px;
  font-size: 16px;
  border: 1px solid red;
}  
.test2 > span {
    font-size: 30px;
/*     display: inline-block; */

    background-color: #0fd9fe;
}

下面的这张图是设置子元素为默认的inline时内容占用的区域，通过chrome开发者工具可以看到绿色区域的高度是42px

下面的这张图是设置子元素为默认的inline-block时内容占用的区域，通过chrome开发者工具可以看到绿色区域的高度是30px

我对于这两种情况下的浏览器计算结果不是很理解，期望大佬指点迷津。

今天又在多个浏览器测试了一下，在safari和chrome表现一致，在firefox中不管子元素是inline或者是inline-block都有一致的表现。

Answer 1

继承规则：值继承。感觉你的问题其实是line-height和vertical-align？

1. inline元素没有高度吧？ 所以你测试span display:inline的意义是啥子？文本内容区的高度吗？取决于font-size/font-family多种影响，是文本设计师的领域...
2. 你需要关注的高度应该是div和span display：inline-block/inline之间的关系吗？=》子元素变为Inline和inline-block的时候发现子元素占用的内容区域会发生变化
   幽灵空白节点+vertical-align:base对齐导致。你既然能理解百分比，应该也能理解数值吧。

Answer 2

这个原因和 line-height 值无关,如果要验证 line-height 可以使用 window.getComputedStyle() 来验证,其实值都一样的。设置为 inline 后,宽高会失效,会显示为 auto,你看到的蓝色背景,或者可以叫内容区域,并不会影响文档布局,影响布局的是行框高度,这个由 line-heigth 决定,虽然看上去变为 42 px,你会发现其实布局不会变。一个 auto 的尺寸,应该如何渲染呢,不同的浏览器有不同的效果,应该说是一种未定义行为。如果对这种行为有疑惑,可以设置一个 inline 元素的 padding 值,然后放到不同的浏览器下渲染,你会发现渲染并不都是相同的