CSS 字体大小 vs 行高 vs 实际高度

font-size vs line-height vs actual height

提问by user764754

So thisquestion says that the font-sizedefines the height of a box so that all letters (with ascenders and descenders) can fit.

所以这个问题说font-size定义了一个盒子的高度，以便所有字母（带有上升和下降）都可以容纳。

But why has a spanwith 40px font-sizeand line-heightan actual size of 45px? If I understand the linked question correctly then "X" should be smaller than 40px but the overall height should be exactly 40px. I thought that maybe it is making some extra room above/below the ascenders/descenders but the image shows that the ascenders/descenders take all the space so there can't be much extra room:

但为什么有span40pxfont-size和line-height45px 的实际大小？如果我正确理解了链接的问题，那么“X”应该小于 40px，但总高度应该正好是 40px。我想也许它在上升器/下降器的上方/下方腾出了一些额外的空间，但图像显示上升器/下降器占据了所有空间，所以不可能有太多额外的空间：

When I wrap a div(green) around the spanthen the divhas a height of 40px. Why does the divuse the font-sizeof its child for its height but the child itself doesn't?:

当我div在周围包裹一个（绿色）时span，div它的高度为 40px。为什么div使用font-size其孩子的高度来表示其高度，而孩子本身却没有？：

Now when I set the span's line-heightto 15px (less than the font-size) then the div's height changes to 26px. How is this value calculated? Has this something to do with the baseline?:

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

When I set the span's line-heightto 65px (more than the font-size) then the div's height is the height of the line-height. I would have expected the div's height to be something like (65px - 45px) + 45px.:

当我将span's设置line-height为 65px（大于font-size）时，div's 的高度就是line-height. 我原以为div的高度应该是 (65px - 45px) + 45px 之类的。：

So how do font-sizeand line-heightaffect the actual heights of elements? I read some questions that referenced the spec but I couldn't make much out of it. Are there any easy to understand rules?

那么，如何才能font-size和line-height影响因素的实际高度？我阅读了一些参考规范的问题，但我无法从中得到太多。有没有容易理解的规则？

Fiddler

提琴手

采纳答案by Oriol

First, I recommend reading my answer in Inline elements and line-height. To summarize, there are various heights related to inline boxes:

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

• Height of the inline box, given by line-height
• Height of the line box, which in simple cases is also given by line-height, but not here.
• Height of the content area of the inline box, which is implementation dependent. This is the area painted by the red background.

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

The other height in your case is the height of the parent div. This is determined by §10.6.3. In this case, since the box establishes an inline formatting context with one line,

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

The element's height is the distance from its top content edge to [...] the bottom edge of the last line box

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

So the height of the parent block is given by the height of the line box.

所以父块的高度由行框的高度给出。

What happens here is that the height of the line box is not the line-heightof your inline box. And that's because the line-heightof the parent block is also taken into account:

这里发生的情况是行框的高度不是line-height内联框的高度。那是因为还考虑line-height了父块的：

On a block container elementwhose content is composed of inline-levelelements, 'line-height' specifies the minimalheight of line boxes within the element.

The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties.

We call that imaginary box a "strut."

在内容由行内级元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。

最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。

我们称这个假想的盒子为“支柱”。

If you set parent's line-heightto 0, and child's vertical-alignto e.g top, then the height of the parent will exactly be the line-heightof the child.

如果您将 parent's 设置line-height为0，将 child's 设置vertical-align为 eg 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.

If you don't set a line-heightto the parent, it will be normal.

如果您没有将 a 设置line-height为父级，它将是normal.

Tells user agents to set the used value to a "reasonable" value based on the font of the element[...]. We recommend a used value for 'normal' between 1.0to 1.2.

告诉用户代理根据元素的字体将使用的值设置为“合理”的值[...]。我们建议使用 'normal'1.0到之间的值1.2。

That means that there will be a minimum height for the parent which will be its font-size(which you don't specify, and the default is implementation-dependent) multiplied by that factor (implementation-dependent).

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

You should also consider the vertical-alignof the span. By default it's baseline, and that may create a gap below. The image in web-tiki's answeris especially useful:

您还应该考虑vertical-align跨度的 。默认情况下它是baseline，这可能会在. 在图像网络的tiki的答案是非常有用的：

That's because vertical-aligndetermines how the span will be aligned with the strut, and with baselinethe alignment can depend on font-sizeand end up increasing the height of the line box. The line box height is the distance between the top of the uppermost and the bottom of the lowermost boxes in the line.

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

If you don't want the height of the parent div to be increased by that, you need some other vertical-align, like top, middle, or bottom. Then the font-sizeof the span shouldn't affect the height of the div.

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

To summarize, the height of the div depends on

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

• Its line-height
  • ... which by default depends on div's font-size
• Span's line-height
  • ... which by default depends on span's font-size
• Possibly span's font-size, depending on span's vertical-align
• And obviously height, min-height, max-height, etc.

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

回答by Jacob

Introduction

介绍

Good question,

好问题，

I learn most of these things through personal experience.

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

In this case, the DIV height is set to auto. It will detect the height of its own contents, and evaluate its new height from there.

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

Clearly, the DIV only takes into account the line height of the . This is likely due to the diverse number of fonts. Line-height gives us the adaptability we need for various font types.

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

In Short

简而言之

font-size

字体大小

Font size only changes the actual font itself, and not the div elements around it

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

line-height

行高

Line-height is the height of the actual line and will change the div elements around it

Line-height 是实际线的高度，会改变它周围的 div 元素

Wait a second...

等一等...

If we have something like this:

如果我们有这样的事情：

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>

Clearly the size of the DIV (height: auto;) changes according to font-size. That's because the line-height will automatically adjust accordingly if it is not set manually.

显然，DIV 的大小（高度：自动；）根据字体大小而变化。那是因为如果不手动设置 line-height 会自动相应地调整。

One Exception

一例外

Upon further inspection, I noticed that DIVs don't always match the line-height. This occurs if the line-height is very small, and the font exceeds it by some distance.

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

The example you gave -

你举的例子——

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

If you look closely,

仔细一看，

letter-span-1 and letter-span-3 both result in the DIV equaling the line-height.

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

However, letter-span-2 does not.

但是， letter-span-2 没有。

-------------- Line-height - Actual-height

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

letter-span-1: 40px - 40px

字母跨度1：40px - 40px

letter-span-2: 15px - 25px

字母跨度 2：15px - 25px

letter-span-3: 65px - 65px

字母跨度 3：65px - 65px

Notice that letter-span-2 is the smallest. It is so small, it will actually limit the height of the div. You can test this by altering the font size.

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

The "Why?"

“为什么？”

Why have these two different settings, and not just change height normally?

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

I honestly am not sure, but I speculate that it was because fonts aren't standard. If the computer misreads a particular font, it may incorrectly evaluate the line-height.

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

Not to mention the numerous "CSS Tricks" you can do with line-height. It is great for adding space for open designs.

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

Conclusion

结论

Line-height defines div height, unless line-height is very small, in which case the font-size will define the size.

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