我的理解是span
的line-height
设置为0,那么它所在行的行框的高度就变为0,无法撑起div的高度,因此div的高度因此为0。但实际上,div
的高度为27, 应该如何解释div
的高度呢?
另外,如果去掉<!DOCTYPE html>
,那么div
的高度为0,为什么会有这个现象呢?
代码地址:https://jsbin.com/ziyimaleqe/edit?html,output
我的理解是span
的line-height
设置为0,那么它所在行的行框的高度就变为0,无法撑起div的高度,因此div的高度因此为0。但实际上,div
的高度为27, 应该如何解释div
的高度呢?
另外,如果去掉<!DOCTYPE html>
,那么div
的高度为0,为什么会有这个现象呢?
代码地址:https://jsbin.com/ziyimaleqe/edit?html,output
在页面上没有 <!DOCTYPE html>
,浏览器将会以 怪异模式 的方式去渲染,就会引起一些问题。
在怪异模式下,排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
5 回答1.9k 阅读
行框是由内部的各个行内框组成的,这里的 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)