html – 为什么高度会随着字体的缩小而增加？
|
我有一个具有特定行高的块,其中我使用:: 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. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |