span元素line-height为0，为何div的高度却非0？

div高度的解释

在HTML代码中，span元素的line-height设置为0，如下：

<span style="line-height:0">这是一个span元素</span>

通常情况下，span的line-height为0会导致其所在行的行框高度为0，无法撑起div的高度，导致div的高度也为0。然而，在这个代码示例中，div的高度实际为27。

这是因为在行框中，除了span元素生成的行内框外，还存在一个额外的匿名行内框。这个匿名行内框无法看到，但它从父元素div那里继承line-height。因此，如果div的line-height为非0，则这个匿名行内框的高度也会非0。

这两个行内框在垂直位置上不同，span的行内框位于字体中间偏下，而匿名行内框位于默认字体大小的一半左右往下。当两个行内框的垂直位置不同时，就会导致行框的高度非0。

另外，如果去掉声明，那么div的高度将为0。这是因为省略文档类型声明会导致浏览器使用兼容模式，在这种模式下，一些CSS属性的行为可能与标准模式不同。在兼容模式下，div可能会使用文本基线(baseline)作为其高度，而不是行框的高度，导致高度为0。

以上就是span元素line-height为0，为何div的高度却非0？的详细内容，更多请关注硕下网其它相关文章！