为什么跨度的线高无用？

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的{​​{1}}未使用？

line-height仍为line-height，但当我们将200px的{​​{1}}属性设为span时，display {使用{1}}？

见下文：

inline-block

line-height

Answer 1

默认情况下，块布局（如div）由垂直堆叠的线框组成，它们之间永远不会有空格，永远不会重叠。每个行框都以 strut 开头，它是一个虚构的内联框，表示为块指定的行高的高度。然后，线框继续显示标记的内联框，根据它们的线高。

下图显示了第一个示例的布局。请注意，由于字体高度的1.7倍远小于支柱的高度，因此线条高度由支柱的高度决定，因为线框必须完全包含其内联框。如果您将span上的行高设置为大于200px，则行框会更高，您会看到文本移得更远。

当您创建span内联块时，div和span之间的关系不会改变，但是跨度会获得它自己的块布局结构以及它自己的堆栈线盒。因此，文本和换行符在此内部堆栈中布局。内部块的支柱是字体高度的1.7倍，即与文本相同，现在布局如下所示，因此文本行更靠近在一起，反映了{{1的行高设置}}。

（请注意，这两个图表的尺寸不同。）

Answer 2

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

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

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

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