为什么跨度的 line-height 没用？

Question

首先我们来看一段代码：

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7;  }

<div><span>123<br>456<br>789<br>000</span></div>

为什么span 的line-height 未被使用？

line-height 仍然是200px，但是当我们将span 的display 属性设置为inline-block 时，使用了span 的line-height？

见下文：

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }

<div><span>123<br>456<br>789<br>000</span>

Answer 1

块布局，如div 元素，默认情况下由行框的垂直堆栈组成，它们之间永远不会有空间，也不会重叠。每个行框都以 strut 开头，它是一个虚构的行内框，其高度是为块指定的行高。然后根据行高，行框与标记的行内框一起继续。

下图显示了您的第一个示例的布局。请注意，因为 1.7 倍的 font-height 远小于 strut 的高度，所以行高由 strut 的高度决定，因为 line box 必须完全包含它的 inline box。如果您将 span 上的行高设置为大于 200 像素，则行框会更高，您会看到文本之间的距离更远。

当你制作span inline-block 时，div 和span 之间的关系不会改变，但是 span 获得了它自己的块布局结构和它自己的行框堆栈。因此，文本和换行符布局在这个内部堆栈中。内部块的支柱是 font-height 的 1.7 倍，即与文本相同，现在布局如下所示，因此文本行位置更靠近，反映了 span 的 line-height 设置.

（请注意，这两个图表的比例不同。）

Answer 2

这是设计使然。 HTML 文档中有两种元素类型：块和内联。内联元素不会中断文档的流动，但块元素会。

块元素，顾名思义，就是将页面上包含一些内容的区域隔开。块元素的一些示例是：<p> 和 <div>。您可以将高度、行高和其他 CSS 属性应用于这些元素，以更改块的大小，进而更改文档的流向。

内联元素占用渲染它们所需的最小空间，这意味着在这些元素上设置宽度和高度将不起作用。正如您已经看到的，您可以告诉浏览器将内联元素视为块元素，以允许您对其应用高度。

使用<li> 元素创建菜单时可以看到一个例子。 <li>s 是块元素。如果您创建一个列表，项目将垂直显示在页面上，确保每个列表项都显示在前一个列表项的下方。但是，如果您将display: inline; 应用于列表项，它们现在将水平显示。