零行高元素内 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 高度为何不为零？的详细内容，更多请关注其它相关文章！