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像素。即使您在跨度本身上设置行高，也是如此：

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

请参阅附带的副本：CLOCK_WATCHDOG_TIMEOUT

Answer 1

<span>默认为inline element。

如果您希望它的行为类似于内联块元素，则必须为其赋予display的{{1}}值，并且其高度将恰好为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>属性的含义，我建议使用Candidate Recommendation。这是当前的（官方）Recommendation。

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

1 个答案: