我希望我可以将块元素的行高设置为零,然后该元素内的每个行框将仅根据其内容的行高对齐。但是,当我尝试在这些内联元素上使用非常小的字体时,它们似乎与低于行中内容所需的基线对齐。我对 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' 指定用于计算行框高度的高度。
我知道对于一个简单的例子,比如有很多方法可以破解小文本的位置并让它最终出现在包含块的顶部,但我真的很想了解文本的实际原因正在排队。