小编set*_*ien的帖子

我希望我可以将块元素的行高设置为零,然后该元素内的每个行框将仅根据其内容的行高来对齐.但是,当我尝试在这些内联元素上使用非常小的字体时,它们似乎与行中内容所需的基线不一致.我对CSS规范的理解并不符合所有浏览器的渲染要求; 我有什么不对？

简单演示的代码看起来像这样(而且它也是一个小提琴):

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"指定元素中线框的最小高度.

在未替换的内联元素中,'line-height'指定用于计算线框高度的高度.

我知道,对于一个简单的例子,有很多方法可以破解小文本的位置并使其最终位于包含块的顶部,但我真的很想了解文本的实际原因正在排队.