下面的代码中,如何解释div的高度?
我的理解是span
的line-height
设置为0,那么它所在行的行框的高度就变为0,无法撑起div的高度,因此div的高度因此为0。但实际上,div
的高度为27, 应该如何解释div
的高度呢?
另外,如果去掉<!DOCTYPE html>
,那么div
的高度为0,为什么会有这个现象呢?
代码地址:https://jsbin.com/ziyimaleqe/edit?html,output
回复
1个回答

test
2024-07-03
行框是由内部的各个行内框组成的,这里的 span 会生成一个行内框,行内框高度为 line-height 高度 0。除此之外会有一个额外的匿名行内框,这个匿名行内框看不到,但是可以从父元素 div 那里继承 line-height,如果 div 的 line-height 为 0,那么这个匿名行内框的高度也是 0。那为什么 div 会有高度呢,是因为这两个行内框的垂直位置不同造成的。span 的行内框的位置大概在字体中间靠下一点,具体和字体内部的一些对齐线有关(受使用的字体影响)。匿名行内框的位置在默认字体大小 16px 一半左右往下一点点,大概是 6px。如果你把 font-size 设置为 0,那么匿名行内框的位置就最贴近底部,会发现 div 的高度增加 6px 左右。如果两个 font-size 一样,那么这两个行内框垂直位置是一样的,因此行框高度就为 0。
https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_forma...(搜索 Inline anonymous boxes)
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容