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

Posted 2023-05-09

【中文标题】为啥 div 内的嵌套跨度不遵循该 div 的行高规则？

【英文标题】：Why a nested span inside a div does not follow line-height rule for that div?为什么 div 内的嵌套跨度不遵循该 div 的行高规则？

【发布时间】：2019-03-29 00:12:31

【问题描述】：

我有一个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

【问题讨论】：

对于您的跨度样式缺少“”的人

@Icewine 已修复，但这对我的问题的影响为零，问题仍然存在。

【参考方案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。

【讨论】：

为什么span元素设置为inline时高度不一样？

简单的答案是：因为内联内容就是这样工作的。技术答案可在 inline-formatting 和 line-height 的文档中找到。

@AndreiGheorghiu 好的，是的，我明白了，为什么“我需要”出现在带有引号的检查器中并且高度仍然为 101？见图片：imgur.com/a/i2B98In

因为 Chrome 现在为您提供有关块级元素中包含的文本节点的信息，就像它们是单独的元素一样（它们是单独的节点，但它们不是 html 元素）。但是，文本节点 是 一个 inline 元素，但不要将其误认为是 <div> 本身，其高度正好88px.

@AndreiGheorghiu 有什么办法吗？我的问题是我在“我需要”文本上设置了一个点击事件，但它直接堆叠在另一个带有点击事件的元素下方。但是因为“我需要”文本仍然在 101 像素处读取，它会溢出到上面的元素中，导致点击事件不准确。