零行高元素内 div 高度为何不为零？

对于一个文章开发者来说，牢固扎实的基础是十分重要的，米云就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《零行高元素内 div 高度为何不为零？》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

零行高元素内 div 高度为何不为零？插图

如何解释具有零行高的元素内的 div 高度？

以下代码中，尽管 span 元素设置了 line-height 为 0，但 div 却有 27 像素的高度。如何理解这一现象？

<!DOCTYPE html>
<div style="line-height: 0">
  <span style="line-height: 0">文本</span>
</div>

回答：

行框是由其内部的行内框构成。在这个例子中，span 创建了一个行内框，其高度为 line-height 0。此外，还有一个看不见的匿名行内框继承了父元素 div 的 line-height。

尽管 div 的 line-height 为 0，但匿名行内框的位置低于 span 的行内框。具体位置取决于默认字体大小（16px）以及与字体相关的对齐线。

因此，即使 span 的 line-height 为 0，匿名行内框为 div 提供了高度。如果两个元素的 font-size 都为 0，匿名行内框会紧贴底部，div 高度会增加约 6 像素。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《零行高元素内 div 高度为何不为零？》文章吧，也可关注米云公众号了解相关技术文章。

近期文章