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

Question

所以这个问题说明了font-size一个盒子的高度,所以所有的字母(上升和下降)都可以适合.

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

当我围绕div(绿色)包裹时span,div其高度为40px.为什么div使用font-size它的孩子的高度,但孩子本身没有？:

现在,当我将span's 设置line-height为15px(小于font-size)时,则div高度变为26px.这个值是如何计算的？这与基线有关吗？:

当我将span's 设置line-height为65px(大于font-size)时,那么div高度就是高度line-height.我原div以为它的高度是(65px - 45px)+ 45px:

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

提琴手

Answer 1

首先,我建议在Inline元素和line-height中阅读我的答案.总而言之,有关内联框的各种高度:

• 内联框的高度,由下式给出 line-height
• 线框的高度,在简单的情况下也是由line-height,但不是在这里.
• 内联框的内容区域的高度,取决于实现.这是红色背景绘制的区域.

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

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

所以父块的高度由线框的高度给出.

这里发生的是线框的高度不是line-height你的内联框的高度.那是因为line-height父块的内容也被考虑在内:

在内容由内联级元素组成的块容器元素上,"line-height"指定元素中线框的最小高度.

最小高度包括基线上方的最小高度和其下方的最小深度,就像每个线框以零宽度内联框开头一样,其中包含元素的字体和线高属性.

我们称这个想象的盒子为"支柱".

如果您将父级设置line-height为0,而将子级设置vertical-align为例如top,那么父级的高度将完全是line-height子级的高度.

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

<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.

如果你没有设置line-height父母,它将是normal.

告诉用户代理根据元素[...]的字体将使用的值设置为"合理"值.我们建议之间的"正常"使用过的值1.0来1.2.

这意味着父级的最小高度将是它font-size(你没有指定,默认是依赖于实现)乘以该因子(依赖于实现).

你还应该考虑vertical-align跨度.默认情况下baseline,这可能会产生一个差距.web-tiki的答案中的图像特别有用:

这是因为vertical-align确定跨度将如何与支柱对齐,并且baseline对齐可以取决于font-size并最终增加线框的高度.线框高度是线条中最下面框的最上部和底部之间的距离.

如果你不想父div的高度将增加那些,你需要一些其他的vertical-align,像top,middle或bottom.然后font-size跨度不应该影响div的高度.

总而言之,div的高度取决于

• 它的 line-height
  • ...默认情况下取决于div font-size
• 跨度的 line-height
  • ...默认情况下取决于跨度 font-size
• 可能跨度font-size,取决于跨度vertical-align
• 很显然height,min-height,max-height,等.

Answer 2

介绍

好问题，

我通过个人经验学到了大部分这些东西。

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

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

简而言之

字体大小

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

行高

Line-height 是实际线的高度，会改变它周围的 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 的大小（高度：自动；）根据字体大小而变化。那是因为如果不手动设置 line-height 会自动相应地调整。

一例外

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

你举的例子——

.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 没有。

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

字母跨度1：40px - 40px

字母跨度 2：15px - 25px

字母跨度 3：65px - 65px

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

“为什么？”

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

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

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

结论

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