浏览器似乎在此块上包含文本的最小行高。为什么？ [英] The browser seems to have a minimum line-height on this block that contains text. Why?

问题描述

我期望我可以将块元素的线高度设置为零，然后该元素内的每个线框将仅基于其内容的线高度进行对齐。但是，当我尝试在这些内联元素上使用非常小的字体时，它们似乎与该行中的内容所需的基线相对应。我对CSS规范的理解不符合所有浏览器渲染;我错了什么？

I expect that I could set the line-height of a block element to zero, and each line box inside that element would then be aligned based only on the line-heights of its content. However, when I try to use very small fonts on those inline elements, they seem to align with a lower baseline than necessary for the content in the line. My understanding of the CSS spec doesn't line up with what all browsers are rendering; what do I have wrong?

一个简单的演示代码看起来像这样（它在一个 fiddle ）：

The code for a simple demo looks like this (and it's in a fiddle too):

body {
    font-size:60px;
}
div {
    height:3em;
    width:8em;
    border:1px solid black;
    line-height:0; /* minimum line height for contained elements */
}
span {
    line-height:normal; /* don't inherit from containing block */
    background-color: #cff; /* so we can see positioning */
}
<div><span>Big text works</span></div>
<div><span style="font-size:.5em">Half text size works fine too</span></div>
<div><span style="font-size:.2em">Very small text doesn't align with the top of the containing box. Why does this happen?</span></div>

根据 CSS规格：

元素，其内容由行内元素组成，'line-height'指定元素内行框的最小高度。

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

在未替换的内联元素上， 'line-height'指定用于计算行框高度的高度。

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

我知道一个简单的例子像有一堆方法来破解小文本的位置，并得到它最终在包含块的顶部，但我真的想了解文本正在排队的实际原因。

I know that for a simple example like there are a bunch of ways to hack the position of the small text and get it to end up at the top of the containing block, but I'd really like to understand the actual reason that the text is lining up as it does.

推荐答案

事实证明，我看到的行为与最小 height 。问题在于基线对齐，因为跨度 vertical-align：baseline 。如果跨度具有不依赖于其父级基线的 vertical-align （例如 bottom ），

It turns out that the behavior I saw isn't anything to do with a minimum line-height as I assumed. The issue is around baseline alignment, because the span had vertical-align:baseline. If the span had a different vertical-align such as bottom that didn't depend on its parent's baseline, it would move up to the top of the containing div where I expected it to be.

strut（在每个行块的开头都有一个虚构的字符，并且有父节点元素的 font-size 和 line-height ）不仅指定线的顶部和底部边缘，也有自己的基线。 （在CSS3中，它实际上有一堆基线，但现在我们可以只关注字母）。strut的基线被定位，以使在父元素的字体中呈现的字符将结束在顶部和底部之间的中间支柱。在线高度为零的特定情况下，支柱的顶部和底部是相同的线，但是它具有实际上在其底部边缘下方的基线。支柱的基线，如其底部边缘，定义线的最小值：它可以向下移动，但不能向上移动。这意味着，当我们在span中渲染一个更小的字体时，它使用一个基线，将div的字体集中在div的顶部边缘。

The strut (that imaginary character that goes at the beginning of every line block and has the parent element's font-size and line-height) doesn't just specify a top and bottom edge for the line, it also has a baseline of its own. (In CSS3 it actually has a bunch of baselines, but for now we can just focus on the "alphabetic" one.) The strut's baseline is positioned so that characters rendered in the parent element's font would end up halfway between the top and bottom of the strut. In this particular case where the line-height is zero, the strut's top and bottom are the same line, but it has a baseline that is actually below its bottom edge. The strut's baseline, like its bottom edge, defines a minimum for the line: it can move down, but never up. This means that when we render a much smaller font in the span, it is using a baseline that would center the div's font on the top edge of the div.

这篇关于浏览器似乎在此块上包含文本的最小行高。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！