如何解释div在span的line-height为0时仍有高度?
在给定的代码中,的line-height被设置为0。通常情况下,这会导致其所在行的行框高度也为0。然而,的高度却为27px。为什么会这样呢?
事实证明,行框是由行内框组成的。span会生成一个行内框,其高度为line-height高度(0)。除了这个显式行内框之外,还有一个隐含的匿名行内框。这个匿名行内框从
元素继承line-height。如果的line-height为0,那么匿名行内框的高度也是0。 元素的高度不为0是因为这两个行内框的垂直位置不同。span的行内框位于字体中间靠下一点,而匿名行内框则位于默认字体大小的一半左右下方(约6px)。因此,行框的高度为匿名行内框的高度,加上span行内框和默认字体大小之间的差值(约6px)。当触发DOM内容加载后(例如,通过删除),div高度变为0。这是因为此时浏览器的渲染模式发生了改变,不在使用标准的CSS框模型。在这种渲染模式下,行框的高度由其内部的内容决定,而和匿名行内框之间的垂直偏移量将不再存在。
以上就是为什么div在span的line-height为0时仍有高度?的详细内容,更多请关注知识资源分享宝库其它相关文章!
版权声明
本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com
发表评论