Question

就像几天过去一样，当我试着回忆起我读到的关于line-height的内容时，我所看到的东西是误导的

<span>Color me</span>

span {
    line-height: 52px;
    background: red;
    font-size: 14px;
}

为什么它没有为完整的盒子着色（即完成line-height）？

但是当我对div执行相同操作时，它会根据需要进行颜色处理。

<div>Color me</div>

div {
    line-height: 52px;
    background: red;
    font-size: 14px;
}

Answer 1

在这种特殊情况下，您需要添加以下内容：

span {
  display: inline-block;
  /* ... */
}

至于为什么的原因，你应该看看盒子模型上的documentation。

Answer 2

由于span是一个内联元素，它只占据文本的高度，并没有覆盖整个区域，而在div中它是一个块元素，因此它可以覆盖整个区域。

将内联元素转换为块元素的方法是

span{display: inline-block;}

Answer 3

因为行高不适用于内联元素。 span是一个内联元素。您可以添加display：block或inline block来跨越css

在替换内联元素（如按钮或其他输入元素）时，line-height无效。

有关详细信息，请参阅line-height@Mozilla

Answer 4

span和div之间的区别在于span元素是内联的，通常用于一行内的一小部分HTML（例如段落内），而div（division）元素是块行（基本上相当于在它之前和之后有一个换行符）并用于分组更大的代码块。

Answer 5

在使span元素保持内联的同时，此问题的实际答案是使用padding属性。