登录  /  注册
减小字体大小如何导致高度增加?
P粉947296325
P粉947296325 2023-11-23 12:42:17
[CSS3讨论组]

我有一个具有特定行高的块,我在其中插入带有 ::before 伪元素的内容。

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

这个效果很好。但是,如果我也给内容设置较小的字体大小

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

方块实际上变得更高了。这是为什么?


.container {
    display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
    line-height:3em; border:1px solid green
}
.ipsum:before {
    content:'world!';
}
.sit:before {
    font-size:.6em;
    content:'world!';
}
<div class="container">
    <div class="lorem">Hello</div>
</div>
<div class="container">
    <div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
    <div class="dolor">Hello</div>
</div>
<div class="container">
    <div class="sit"></div>
</div>


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

现在我发现一个可能的解决办法就是将伪元素的line-height设置为0。或者到1em。或者甚至到 normal。那么发生了什么?通过将字体大小设置为 .6em 是否将 line-height 设置为一些奇怪的值?为什么?

PS 虽然这看起来像是重复的(请参阅右侧的列表),但到目前为止我读过的答案都没有解释为什么设置 line-height:normal 可以解决问题。一定发生了一些事情,隐式地将行高设置为更大的值。这就是我想要找出的答案。


P粉947296325
P粉947296325

全部回复(2)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号