了解有关内联级别框上的高度的CSS2.1规范 [英] Understanding CSS2.1 specification regarding height on inline-level boxes

问题描述

CSS2.1第10.6.1节指定:

内容区域的高度应基于字体，但是此规范未指定操作方式. UA可以例如使用em-box或字体的最大升序和降序.

The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font.

内联不可替换框的垂直填充，边框和边距始于内容区域的顶部和底部，并且与 .

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'.

然后，看起来矛盾的语句出现在 10.8行高计算中:

Then, the statements that seem contradictory follow in 10.8 Line height calculations:

行框的高度确定如下:

The height of a line box is determined as follows:

1. 计算行框中每个 inline-level框的高度. 对于内联框，这是其'line-height ' ....

1. The height of each inline-level box in the line box is calculated. For inline boxes, this is their 'line-height'....

并且:

用户代理必须通过其相关基准使未替换的嵌入式框中的字形彼此对齐....

User agent must align glyphs in a non-replaced inline box to each other by their relevant baselines....

内联框的高度将所有字形及其两边的前导符括起来，因此正是

The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'

有些事情我在这里还不完全清楚.

There is something I am not fully understanding here.

内嵌级框的高度是否等于其上设置的line-height属性(最小值是在父块容器元素上设置的line-height))，还是由字体高度(和UA实现)决定?

Is the height of inline-level boxes equal to the line-height property set on them (with the minimum being the line-height set on the parent block container element), OR is it just determined by the font height (and UA implementation)?

编辑

只是为了避免造成混乱(因为有很多与此相关的帖子):

Just to avoid confusion (since there are many posts about this):

• 我知道inline-level element的内容高度等于它包含的字体(和UA实现)
• 我意识到规范确实在10.6.1中声明了这一点，但在10.8.1中声明了inline-level box的高度等于其line-height
• 这似乎与我矛盾
• 我在这篇文章中的目的是讨论规范中的措辞，以便充分理解其含义以及与现实的联系

• I know that an inline-level element's content height is equal to the font it contains (and UA implementation)
• I realize the spec does state that in 10.6.1, but in 10.8.1 it states that the height of an inline-level box is equal to its line-height
• That seems contradictory to me
• My purpose with this post is to discuss the wording in the spec, in order to fully understand what it means and how it ties in with reality

为了避免以基于观点"的接近票数，我更改了标题.我认为规范不是矛盾的，我也不是在征求其他人关于它是否矛盾的观点.

To avoid the "opinion based" close votes, I have changed the title. It is not my opinion that the spec is contradictory, and I am not asking for anyone else's opinion on whether it is contradictory either.

我意识到这实际上并不矛盾，我只是想理解为什么不这样做，因为它的措辞.

I realize it is not actually contradictory, I was just trying to understand why it is not, given its wording.

推荐答案

内联级别框的高度是否等于其上设置的line-height属性(最小值是在父块容器元素上设置的line-height)，

Is the height of inline-level boxes equal to the line-height property set on them (with the minimum being the line-height set on the parent block container element),

是的.

是由字体高度(和UA实现)决定的吗?

OR is it just determined by the font height (and UA implementation)?

不，不是

CSS实际上是关于盒子的，而不是元素的，并且您应该尽量不要混淆两者.

CSS is really about boxes, not elements, and you should try not to confuse the two.

因此，一个内联元素与之关联了许多框.内容框，填充框，边框和边距框.它还具有零个(如果是display:none)，一个或多个内联框.内容框，内边距，边框和边距可以在内联框之间划分，以便内联内容可以分布在多行上.

So an inline element has associated with it a number of boxes. A content box, padding box, border box and margin box. It also has zero (if display:none), one, or multiple inline boxes. The content box, paddings, borders and margins may be divided among the inline boxes so that the inline content can be spread over more than one line.

内嵌框的高度是由

The inline box's height is the content height adjusted by the leading. It's the leading that does the magic here. The leading is defined as the line-height of the element minus the content height of that inline box.

简单地重新排列该方程式可以告诉我们，内联框的高度仅取决于行高，而不取决于内容框(或填充，边框，边距框).

Simply rearranging that equation tells us that the height of the inline box depends only on the line-height and not on the content box (or padding, border, margin boxes).

请注意，以上内容都没有讨论行框，这又是另一回事，而不是内联元素或其框的直接属性.通过将出现在同一条线上的内嵌框排列成它们的垂直对齐方式，以适应其为元素计算的规则(包括由撑杆形成的零宽度内嵌框)，构造出线框.

Note that none of the above discusses the line box, which is a different thing again and not a direct property of inline elements or their boxes. The line box is constructed by arranging the inline boxes that occur on the same line such that their vertical alignments fit the rules computed for the elements, including the zero width inline box formed by the strut.

每个行框都由该行框所包含的最上面的内嵌框的顶部和最下面的内嵌框的底部界定.

Each line box is bounded by the top of uppermost inline box and the bottom of the lowestmost inline box that that line box contains.

题外话:为什么线框的高度会令人吃惊.

假设我们有一个包含块的简单情况，它只包含一个简短的内联元素(即足够短，以至于它适合单个行框).还假设一切都在基线上对齐.假设在包含框上将line-height设置为20px，并且inline元素继承了该高度.此外，假设包含块的字体大小(em-square)为16px，这意味着字体指标计算得出的上升(基线以上)为14px，下降为4px(基线以下).

因此，支撑的内容区域高(14px + 4px =)18px.行高为20像素，因此领先2像素，在上升上方1像素，在下降下方1像素.因此，撑杆的线高由基线上方的15px和基线下方的5px组成.

现在，假设将内联元素的字体大小设置为0.5em(即包含块的字体大小的一半).内联元素的内容区域将是7px的上升和2px的下降.行高仍为20px，因此行距为20px-(7px + 2px)= 11px，这意味着5.5px在上升上方，而5.5px在下降下方.这导致inline元素的行高由基线上方12.5px和基线下方7.5px组成.

由于strut和inline元素垂直于其基线对齐，因此，最上面的inline框(strut)的顶部比基线高15px，最下面的inline框(inline元素)的底部比底线低7.5像素，则线框的实际高度不是20像素，而是(15像素+ 7.5像素=)22.5像素.

这篇关于了解有关内联级别框上的高度的CSS2.1规范的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！