我有一个具有特定行高的块,其中我使用:: before伪元素插入内容.
.block::before {
content:'text here';
}
这很好用.但是,如果我也给内容一个较小的字体大小
.block::before {
font-size:.6em;
content:'text here';
}
块实际上变得更高.这是为什么？
JsFiddle.顶行没有字体大小更改,底行没有.
现在我发现一个可能的解决方案是将伪元素的行高设置为0.或者到1em.甚至是正常的.那么发生了什么？通过将字体大小设置为.6em,行高是否设置为某个奇怪的值？为什么？
PS虽然看起来像副本(见右边的列表),但到目前为止我所读到的答案都没有解释为什么设置line-height：normal可以解决问题.必然会发生一些事情,将行高度隐式设置为更大的值.这就是我想要找到的东西.
解决方法
.lorem,.ipsum,.dolor和.sit框的高度均为它们包含的单行框的高度.
每个线框的高度是基线以上的高度的最大值,线的支柱基线和线中文本的最大高度.因为支柱和文本在基线上对齐.
为清楚起见,em中的高度指的是整个容器的字体大小(即主体元素)
在.ipsum中,(字体大小为1em)基线上方的高度为支柱和文本的1em(上半部分)13 / 16em(上升,近似),基线以下的高度为1em(半场领先)3 / 16em(下降,大约)1em(下半场领先)总共3em.
在.sit(字体大小为0.6em)中,基线以上的高度是[1em(上半部分)13 / 16em(上升部分,大约)支柱的最大值]和[1.2em(上部)半导体)0.6 x 13 / 16em(ascender,大约)为文本],并且基线以下的高度是[1em(下半部分)3 / 16em(下降器,大约)的最大值strut]和[1.2em(下半部分)0.6 x 3 / 16em(下降,大约)文本].
评估并转换为十进制,得出1.8125em高于基线,1.3125em低于基线,总共3.125em,大于.ipsum的3em.
