为什么div中的嵌套跨度不遵循该div的行高规则？

Question

我有一个字体大小为88，行高为88的div。div内的文字高度超过88.这是为什么？

<div style="font-size:88px;line-height:88px;">I need <span sytle="color:red;">videos</span></div>

如果打开元素检查器并突出显示父div，则它是88px高。但是，如果突出显示“我需要”文本和嵌套跨度，则高度为101px。即使您在跨度上设置行高，这仍然是正确的：

<div style="font-size:88px;line-height:88px;">
  I need <span style="font-size:88px;line-height:88px;color:red;">videos</span>
</div>

见附件repl：https://repl.it/@teeej/ReliablePunctualRam

Answer 1

<span>默认是inline element。

如果你希望它表现得像一个内联块元素，你必须给它一个display值inline-block，它的高度恰好是88px：

div > span { 
  display: inline-block; 
  background-color: rgba(255,0,0,.1);
}

<div style="font-size:88px;line-height:88px;">
      I need <span style="font-size:88px;line-height:88px;">videos</span>
</div>

为了更好地理解display财产的含义，我推荐Candidate Recommendation。这是当前（官方）Recommendation。