下面的代码中,如何解释div的高度?

我的理解是spanline-height设置为0,那么它所在行的行框的高度就变为0,无法撑起div的高度,因此div的高度因此为0。但实际上,div的高度为27, 应该如何解释div的高度呢?

另外,如果去掉<!DOCTYPE html>,那么div的高度为0,为什么会有这个现象呢?

代码地址:https://jsbin.com/ziyimaleqe/edit?html,output

阅读 1.4k
2 个回答

行框是由内部的各个行内框组成的,这里的 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)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题