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

Question

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

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

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

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

见附件回复：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。