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

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《span元素line-height为0，为何div的高度却非0？ 》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

div高度的解释

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

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

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

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

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

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

终于介绍完啦！小伙伴们，这篇关于《span元素line-height为0，为何div的高度却非0？ 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！