为什么高度会随着字体的缩小而增加？

Question

我有一个具有特定行高的块,其中我使用::before伪元素插入内容.

.block::before {
  content:'text here';
}

这很好用.但是,如果我也给内容一个较小的字体大小

.block::before {
  font-size:.6em;
  content:'text here';
}

块实际上变得更高.这是为什么？

JsFiddle.顶行没有字体大小更改,底行没有.

现在我发现一个可能的解决方案是line-height将伪元素设置为0.或者1em.甚至到normal.那么发生了什么？是line-height由字体大小设置来设置一些奇怪的值.6em？为什么？

PS虽然看起来像副本(见右边的列表),但到目前为止我所读到的答案都没有解释为什么设置line-height:normal解决了这个问题.必须发生一些事情,将行高度隐式设置为更大的值.这就是我想要找到的东西.

Answer 1

编辑:这个问题最近有很多新的眼球,所以这里有一个更新,使它更有用.

Alohci的解决方案是正确的,但对于更具图形倾向的人来说可能并不十分清楚.

所以请允许我用图片澄清一下解决方案.

首先,行高是作为其计算大小继承的,因此尽管以em单位指定,但子项将以像素为单位继承值.例如,如果字体大小为20px和行高3em,则行高将为60像素,即使对于具有不同字体大小的后代(除非它们指定自己的行高).

现在让我们假设一个具有1/4下行的字体.也就是说,如果你有20px字体,下降器是5像素,上升器是15像素.然后将剩余的线高(在这种情况下,40个像素)平均分配在基线的上方和下方,就像这样.

对于具有较小字体(0.6em或12像素)的块,行高的剩余量为60-12或48像素,其也被平均分配:24以上和24基线以下.

然后,如果我们将两种字体组合在同一基线上,您将看到线高度没有以相同的方式划分,因此包含块的总高度会增加,即使两个线高度都是60像素.

希望这能解释事情!

Answer 2

.lorem,.ipsum,.dolor和.sit框的高度分别是它们包含的单行框的高度.

每个线框的高度是基线以上的高度的最大值+线的支柱基线和线中文本的最大高度.因为支柱和文本在基线上对齐.

为清楚起见,em中的高度,指的是整个容器的字体大小(即body元素)

在.ipsum中,(字体大小为1em)基线上方的高度为支柱和文本的1em(上半部分)+ 13/16em(上升,近似),以及基线以下的高度是1em(半场领先)+ 3/16em(下降,大约)+ 1em(下半场领先)总共3em.

在.sit(字体大小为0.6em)中,高于基线的高度是[1em(上半部分)+ 13/16em(上升部分,大约)支柱的最大值]和[1.2em(上半部分)+ 0.6 x 13/16em(文本的上升部分,大约),基线以下的高度是[1em(下半部分)+ 3/16em(下降部分,近似)的最大值)对于支柱]和[1.2em(下半部前导)+ 0.6 x 3/16em(下降器,约)为文本].

评估并转换为十进制会在基线以上产生1.8125em,在基线以下产生1.3125em,总共产生3.125em,这比.ipsum的3em大.