如何确定块元素和行内元素的内容框高度？

确定块级元素和行内元素中 Content-Box 的高度

理解块级元素的高度

在块级元素中，内容框由内容顶部到以下之一的距离定义（取决于是否存在内联格式化上下文 (IFC) 或块格式化上下文 (BFC)）：

1. IFC 中最后一个行框的底部
2. BFC 中最后一个流入子元素的下边距

如果元素显式设置了高度，则高度内容框就是那个值。

内联元素高度

对于内联元素，内容框的高度没有明确定义，取决于字体大小和其他字体属性。内联元素的垂直边距、边框和填充从内容框的顶部和底部开始，但不影响行框的高度。

示例：确定高度

在提供的 HTML 片段中，内容框的高度如下：

• 段落 (

  ): 高度等于行高(2em) 因为它用一行建立了一个 IFC。

• Div (
  ): 出于同样的原因也等于行高 (2em)。
• Span ():高度随 line-height 变化，表示高度是由字体属性定义的，而不是由 line-height 定义的。