为啥 line-height 在 span 标签中被忽略并在 div 标签中起作用？

Posted 2023-03-05

【中文标题】为啥 line-height 在 span 标签中被忽略并在 div 标签中起作用？

【英文标题】：Why line-height is ignored in a span tag and works in div tag?为什么 line-height 在 span 标签中被忽略并在 div 标签中起作用？

【发布时间】：2013-12-04 20:48:15

【问题描述】：

看下面的例子： CSS: reducing line spacing of text?

我已经尝试过，如果将 CSS 属性线高度放入 span 元素中，几乎会被忽略。为什么？ 为什么我需要将其显示为块才能使 line-height 起作用？

【问题讨论】：

***.com/questions/9609227/…

我认为 line-height 是包装文本行的属性，而不是框的高度。

【参考方案1】：

在块级元素上，line-height CSS 属性指定元素内行框的最小高度。

在不可替换的内联元素上，line-height 指定用于计算行框高度的高度。

在被替换的内联元素上，比如按钮或其他输入元素，line-height 无效。

源：https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

【讨论】：

警告：这不是 CSS 2.1 规范所说的。它说“在内容由内联元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。” inline-block 且具有内联子级的元素符合规范的定义，但不符合 MDN 的定义。

@Alohci：对我来说不是很清楚.. 你能推荐一些读物吗？

@Alohci：从以下链接看来 line-height 适用于 p 标签但不适用于 span 标签：w3.org/wiki/CSS/Properties/line-height

@Sam - 这是不正确的。但是 line-height 做不同的事情。 Span 是不可替换的内联元素（默认情况下），因此“'line-height' 指定用于计算行框高度的高度。”公平地说，这很模糊，但细节变得相当复杂。像这样想。每个 line-box 必须足够高以包含放置在该线上的所有 span 的完整 line-height，以及一个额外的 span 类元素（称为 strut），它是 line-height 设置的高度p 元素...

...垂直对齐会导致一大堆额外且非常微妙的复杂情况，但基本上就是这样。