Question

我的理解是，在内联格式化上下文中，行框垂直堆叠。容器盒的高度是从最顶行盒子的顶边到最底行盒子底边的距离。

但是如果内联元素和内联块元素为空会发生什么？我想在这两种情况下都不会创建任何行框，容器高度将为0。

然而空的内联块元素令人困惑。因为它的容器具有等于线高的正高度。它确实创造了一个线盒！

为什么空的内联块元素会创建一个换行符，但空内联元素不会？

＆＃13;

<!DOCTYPE html>
<html lang="en">
<body>
  <div style="background:red">
    <span style="display:inline-block"></span>
  </div>
</body>
</html>

＆＃13;

Answer 1

的声明

根据需要创建线框，以在内联格式化上下文中保存内联级内容。不包含文本，没有保留的空格，没有非零边距的内嵌元素，填充或边框，以及没有其他插入内容（例如图像，内联块或内联表）的行框），并且不以保留的换行结束必须被视为零高度的线框，以确定其中任何元素的位置，并且必须被视为不存在用于任何其他目的。

因此，内联块明确地阻止包含它们的行被视为零高度或不存在。

Answer 2

当你使用display：inline时，它意味着内容将与之前和之后的内容在同一行（continuation）中。

当您使用display：inline-block时，它会以新行显示，然后是新内容。

Answer 3

display: inline-block元素创建一个新块，元素将自然扩展以填充容器。内联元素没有width或height属性，因此它们没有任何高度或宽度，除非其中包含一些内容。