如何在存在零行高的内联元素时解释块元素的高度
在给定的 HTML 和 CSS 代码示例中， 内联元素的 line-height 设置为 0，这通常会导致
块元素的高度为 0，因为 所在行的行框高度也变为 0，无法撑起
的高度。但实际观测中，
的高度为 27px，这需要如何解释？
解释
高度
行框是由内部的行内框组成的。 会生成一个行内框，其高度为 line-height 的高度 0。此外，还有一个额外的匿名行内框，它从父元素
继承 line-height（当前为 0）。因此，匿名行内框的高度也为 0。
尽管如此，
仍然有高度，这是因为这两个行内框的垂直位置不同。 行内框的位置在字体中间靠下一点，而匿名行内框的位置大约在默认字体大小 16px 一半左右往下一点点（约 6px）。这两个行内框的垂直位置不同，导致行框的高度不为 0。
立即学习“前端免费学习笔记（深入）”；
去除 DOCTYPE 的影响
如果移除 声明，则
的高度会变为 0。这是因为，当浏览器解析 HTML 文档时，如果识别出缺少 DOCTYPE，它将进入“怪异模式（ Quirks Mode）”。在怪异模式下，浏览器的渲染行为可能与标准模式不同，导致意外的渲染结果。在标准模式下，
会正确继承其父元素的 line-height 并表现出相应的高度。
以上就是在 HTML 代码中，“ 设置 line-height 为 0 会导致 “ 高度为 0，但实际观察中 “ 高度为 27px，这是为什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1559527.html
微信扫一扫 
支付宝扫一扫 
