行高和背景颜色（跨度与 Div）

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;
  /* ... */
}

至于原因，请参阅StackOverflow 的这个答案。