Question

所以this问题说font-size定义了一个框的高度，以便所有字母（带有上升和下降符）都适合。

但为什么span的40px font-size和line-height实际尺寸为45px？如果我正确理解链接的问题，那么“X”应该小于40px，但总高度应该恰好是40px。我想也许是在上升/下降器上方/下方增加一些空间，但图像显示上升器/下降器占据了所有空间，因此不会有太多额外的空间：

当我在div周围包裹span（绿色）时，div的高度为40px。为什么div使用其子项的font-size作为其高度，但孩子本身没有？：

现在，当我将span的{{1}}设置为15px（小于line-height）时，font-size的高度变为26px。这个值是如何计算的？这与基线有关吗？：

当我将div的{{1}}设置为65px（超过span）时，line-height的高度就是font-size的高度}。我原以为div的高度是（65px - 45px）+ 45px。：

那么line-height和div如何影响元素的实际高度？我读了一些引用该规范的问题，但我无法从中得到很多。有没有易于理解的规则？

Fiddler

Answer 1

首先，我建议在Inline elements and line-height中阅读我的答案。总而言之，有关内联框的各种高度：

内联框的高度，由line-height
行框的高度，在简单情况下也由line-height给出，但不在此处。
内联框的内容区域的高度，这取决于实现。这是由红色背景绘制的区域。

您的案例中的另一个高度是父div的高度。这由§10.6.3确定。在这种情况下，由于该框使用一行建立内联格式化上下文，

元素的高度是从其顶部内容边缘到[...]最后一个线框底边的距离

因此父块的高度由线框的高度给出。

这里发生的是，行框的高度不是您的内联框的line-height。这是因为父块is also taken into account的line-height：

在block container element上，其内容由inline-level个元素组成，＆＃39; line-height＆＃39;指定元素中行框的最小高度。

最小高度包括最小高度   高于基线，低于它的最小深度，就像每个   行框以零宽度内联框开头，带有元素的字体   和行高属性。

我们将这个虚构的方框称为＆＃34; strut。＆＃34;

如果您将父级line-height设置为0，将子级vertical-align设置为top，那么父级的高度就会准确是孩子的line-height。

＆＃13;

.outer {
  margin-top: 50px;
  background-color: green;
  width: 150px;
  font-family: "Times New Roman";
  line-height: 0;
}
.letter-span-1 {
  background-color: red;
  line-height: 40px;
  font-size: 40px;
  vertical-align: top;
}
.letter-span-2 {
  background-color: red;
  line-height: 15px;
  font-size: 40px;
  vertical-align: top;
}
.letter-span-3 {
  background-color: red;
  line-height: 65px;
  font-size: 40px;
  vertical-align: top;
}

＆＃13;

<span class="letter-span-1">XxÀg</span>
<div class="outer">
  <span class="letter-span-1">XxÀg</span>
</div>
The parent block is 40px tall.
<div class="outer">
  <span class="letter-span-2">XxAg</span>
</div>
The parent block is 15px tall.
<div class="outer">
  <span class="letter-span-3">XxÀg</span>
</div>
The parent block is 65px tall.

＆＃13;

如果您未向父母设置line-height，则会normal。

告诉用户代理将使用的值设置为＆＃34;合理的＆＃34;基于价值在元素的字体上[...]。我们建议使用的值＆＃39;正常＆＃39;在1.0到1.2之间。

这意味着父级的最小高度将是font-size（您没有指定，默认是依赖于实现）乘以该因子（取决于实现））。

您还应该考虑范围的vertical-align。默认情况下，它是baseline和that may create a gap below。 web-tiki's answer中的图片特别有用：

因为vertical-align确定了跨度如何与支柱对齐，而baseline对齐可能取决于font-size并最终增加高度线框。行框高度是行中最下面框的最上部和底部之间的距离。

如果您不希望父div的高度增加，则需要其他vertical-align，例如top，middle或{{1 }}。那么跨度的bottom不应该影响div的高度。

总结一下，div的高度取决于

其font-size
- ...默认情况下取决于div line-height
Span font-size
- ...默认情况下取决于范围＆＃39; line-height
可能跨越font-size，具体取决于范围font-size
显然vertical-align，height，min-height等

Answer 2

<强>简介

好问题，

我通过个人经验了解了大部分这些事情。

在这种情况下，DIV高度设置为自动。它会检测自己内容的高度，并从那里评估它的新高度。

显然，DIV只考虑了线的高度。这可能是由于字体数量不同。行高为我们提供了各种字体类型所需的适应性。

简而言之

字体大小

字体大小只会改变实际的字体本身，而不会改变它周围的div元素

行高

行高是实际行的高度，将改变它周围的div元素

等一下......

如果我们有这样的事情：

div {
  background: green;
  margin-top: 50px;
}
.test-one {
  font-size: 20px
}
.test-two {
  font-size: 40px
}

<div>
  <span class="test-one"> test one </span>
</div>

<div>
  <span class="test-two"> test one </span>
</div>

显然，DIV（高度：自动;）的大小会根据字体大小而变化。这是因为如果没有手动设置线高将相应地自动调整。

一个例外

经过进一步检查，我注意到DIV并不总是与行高匹配。如果行高非常小，并且字体超过它一段距离，则会发生这种情况。

你给出的例子 -

.outer {
  margin-top: 50px;
  background-color: green;
  width: 150px;
  font-family: "Times New Roman"
}
.letter-span-1 {
  background-color: red;
  line-height: 40px;
  font-size: 40px;
}
.letter-span-2 {
  background-color: red;
  line-height: 15px;
  font-size: 40px;
}
.letter-span-3 {
  background-color: red;
  line-height: 65px;
  font-size: 40px;
}

<span class="letter-span-1">XxÀg</span>

<div class="outer">
  <span class="letter-span-1">XxÀg</span>
</div>

<div class="outer">
  <span class="letter-span-2">XxÀg</span>
</div>

<div class="outer">
  <span class="letter-span-3">XxÀg</span>
</div>

仔细观察，

letter-span-1和letter-span-3都会导致DIV等于行高。

但是，letter-span-2没有。

--------------行高 - 实际高度

letter-span-1：40px - 40px

letter-span-2：15px - 25px

letter-span-3：65px - 65px

请注意，letter-span-2是最小的。它太小了，它实际上会限制div的高度。您可以通过更改字体大小来测试它。

“为什么？”

为什么有这两种不同的设置，而不只是正常改变高度？

老实说，我不确定，但我推测这是因为字体不是标准的。如果计算机误读特定字体，则可能会错误地评估行高。

更不用说你可以用line-height做的众多“CSS技巧”了。它非常适合为开放式设计增加空间。

<强>结论

行高定义div高度，除非行高非常小，在这种情况下，font-size将定义大小。

font-size vs line-height vs实际高度

2 个答案: