Question

我的问题是关于内嵌块的高度，该高度仅包含内嵌框

<div style="display: inline-block; 
            height: auto; 
            border: 1px solid red
"><span style="font-size: 16px; 
               line-height: 16px; 
               background-color: yellow;
">x</span></div>

在上面的示例中，我期望以下内容：

内联块内容区域的高度为 16px ，因为它仅包含内联元素
在我的案例中，由“ line-height”确定的内联元素的高度等于 16px ，但实际上，其高度为 18px

内联块元素应创建块格式化上下文（MDN）：

以下至少一项创建块格式化上下文：


根元素或包含根元素的东西

floats（元素中的float不为空）

绝对定位的元素（位置为绝对或固定的元素）

内嵌块（显示元素：内嵌块）

表格单元格（带有display：table-cell的元素，这是HTML表格单元格的默认设置）

表格标题（带有显示的元素：表格标题，这是HTML表格标题的默认设置）

由显示以下元素隐式创建的匿名表单元格：table，table-row，table-row-group，table-header-group，table-footer-group（这是HTML表格，表格行，表格的默认设置）正文，表标题和表页脚）或内联表

其中溢出值不可见的块元素

显示：流根

元素包含：布局，内容或严格

flex项（显示元素的直接子项：flex或inline-flex）

网格项（具有显示的元素的直接子项：grid或inline-grid）

multicol容器（列数或列宽不是自动的元素，包括列数为1的元素）

column-span：即使在column-span：all元素不包含在multicol容器中（规范更改，Chrome错误），所有元素都应始终创建新的格式设置上下文。   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

块格式上下文根的高度，该根仅包含由行框高度（根据规范）定义的内联元素：

10.6.7块格式上下文根的“自动”高度

在某些情况下（例如，参见上面的10.6.4和10.6.6节），建立块格式化上下文的元素的高度计算如下：

如果它仅具有内联级别的子级，则高度是最顶部的线框顶部与最底部的线框底部之间的距离。

https://www.w3.org/TR/CSS2/visudet.html#root-height

线框的高度等于“线高”（根据规格）

在不可替换的嵌入式元素上，“ line-height”指定用于计算线盒高度的高度。

https://www.w3.org/TR/CSS2/visudet.html#leading

如果我在“显示：inline-flex” 上更改“显示：行内阻止” ，

谢谢

Answer 1

感谢@TemaniAfif

他说得对，18px的高度原因在line-height元素的div中。 div的{{1}}指定行框的最小高度

在内容由内联级别组成的块容器元素上元素，“ line-height”指定线框的最小高度在元素中。

在我的情况下，line-height未指定div属性，因此其默认值等于line-height。

名称： normal

值： line-height | normal | <number> | <length> |

继承的缩写： <percentage>

https://www.w3.org/TR/CSS22/visudet.html#leading

如果normal的值为line-height，则计算值取决于用户代理。但规范建议使用元素字体大小的1.0到1.2。看起来通常该值等于normal，但它也取决于字体指标，例如font-size * 1.2，ascent和descent（因此结果取决于字体系列）。 / p>

普通

告诉用户代理将使用的值设置为“合理的”值   基于元素的字体。该值与   。我们建议“正常”的使用值介于1.0到1.2之间。   计算值是“正常”。

如果您知道将在网络上使用的em-box和ascender之类的字体指标以及字体大小，则可以按descender来计算line-heigh

(ascender + Math.abs(descender)) * font-size / (units_per_em)

在function lh(ascender, descender, unitsPerEm, fontSize) { return (ascender + Math.abs(descender)) * fontSize / unitsPerEm; }，ascender=5000，descender=-200和units_per_em=1000以上的图片中，font-size=48px（line-height=(5000 + 200) * 48 / 1000 = 249.6）这样

lh(5000, 200, 1000, 48)，ascent字体属性随字体一起提供，并由字体创建者定义。您可以使用 FontDrop! 服务获取有关字体的信息

Chromium（Webkit）的一些实现细节与行高有关

descent

https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/core/style/computed_style.cc#1835

FixedLineSpacing

LayoutUnit ComputedStyle::ComputedLineHeightAsFixed() const {
  const Length& lh = LineHeight();
  // Negative value means the line height is not set. Use the font's built-in
  // spacing, if avalible.
  if (lh.IsNegative() && GetFont().PrimaryFont())
    return GetFont().PrimaryFont()->GetFontMetrics().FixedLineSpacing();

https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/platform/fonts/simple_font_data.cc#123

块格式上下文根（内联块）的“自动”高度

10.6.7块格式上下文根的“自动”高度

1 个答案: