内容区域的高度应基于字体,但是此规范未指定。UA可以例如使用em-box或字体的最大升序和降序。
内联不可替换框的垂直填充,边框和边距从内容区域的顶部和底部开始,与“ line-height”无关。
然后,在10.8行高计算中遵循似乎矛盾的语句:
线框的高度确定如下:
- 计算行框中每个行内框的高度。对于嵌入式盒,这是它们的“行高” ...。
和:
用户代理必须通过其相关基准使未替换的嵌入式框中的字形彼此对齐。
内联框的高度将所有字形及其两边的前导部分包围起来,因此正好是“行高”
在这里,我有些不完全了解。
内联级别框的高度等于line-height它们上设置的属性(最小是line-height在父块容器元素上设置的属性),还是仅由字体高度(和UA实现)确定?
编辑
只是为了避免造成混淆(因为有很多与此相关的帖子):
inline-level element的内容高度等于它包含的字体(以及UA实现)10.6.1,但10.8.1其中指出的高度inline-level box等于的高度line-height编辑:
为了避免“基于意见”的接近投票,我更改了标题。我认为规范不矛盾,我也不是在征求其他人关于它是否矛盾的观点。
我意识到它实际上并不矛盾,我只是试图理解它的含义(鉴于其措辞)。
内联级框的高度是否等于其上设置的 line-height 属性(最小值为父块容器元素上设置的 line-height),
是的。
或者它只是由字体高度(和 UA 实现)决定?
不,不是
CSS 实际上是关于盒子,而不是元素,你应该尽量不要混淆两者。
因此,内联元素与许多框相关联。内容框、内边距框、边框框和边距框。它还具有零个 (if )display:none、一个或多个行内框。内容框、填充、边框和边距可以在行内框之间划分,以便行内内容可以分布在多于一行上。
行内框的高度是由行距调整的内容高度。正是领导在这里发挥了魔力。行距定义为元素的行高减去行内框的内容高度。
简单地重新排列该方程告诉我们,行内框的高度仅取决于行高,而不取决于内容框(或内边距、边框、边距框)。
请注意,上面没有讨论行框,这又是另一回事,而不是内联元素或其框的直接属性。行框是通过排列出现在同一行上的行内框来构造的,以便它们的垂直对齐符合为元素计算的规则,包括由支柱形成的零宽度行内框。
每个行框都由该行框包含的最上面的行内框的顶部和最下面的行内框的底部界定。
题外话:关于为什么线框的高度会令人惊讶。
假设我们有一个包含块的简单情况,它只包含一个短的内联元素(即足够短以适合单个行框)。还假设一切都在基线上对齐。假设包含框的 line-height 设置为 20px,并且内联元素继承了它。还假设包含块的字体大小 (em-square) 为 16px,这意味着字体度量计算为 14px 的上升(基线上方)和 4px 的下降(基线下方)。
因此支柱的内容区域高为 (14px + 4px =) 18px。行高为 20 像素,因此前导 2 像素,上升部分上方 1 像素,下降部分下方 1 像素。因此,支柱的线高由基线上方 15px 和基线下方 5px 组成。
现在,假设内联元素的字体大小设置为 0.5em(即包含块的字体大小的一半)。内联元素的内容区域将上升 7 像素,下降 2 像素。行高仍然是 20 像素,因此行距为 20 像素 - (7 像素 + 2 像素) = 11 像素,这意味着 5.5 像素位于上升上方,5.5 像素位于下降下方。这导致内联元素的行高由基线上方 12.5 像素和基线下方 7.5 像素组成。
由于支柱和内联元素与其基线垂直对齐,因此最上面的内联框(支柱)的顶部位于基线上方 15 像素,最下方的内联框(内联元素)的底部位于基线下方 7.5 像素,line box的实际高度不是20px而是(15px + 7.5px =) 22.5px。