Html 为什么 span 的 line-height 没用？

Why is the span's line-height is useless?

提问by SKing7

First, let's see a piece of code:

首先我们来看一段代码：

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>

Why is the span's line-heightunused?

为什么span'sline-height未使用？

The line-heightis still 200px, but when we set span's displayproperty to inline-block, the line-heightof the spanis used?

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

See below:

见下文：

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>

回答by Alohci

Block layouts, like divis by default, are made up of a vertical stack of line boxes, which never have space between them and never overlap. Each line box starts with a strutwhich is an imaginary inline box the height of the line-height specified for the block. The line box then continues with the inline boxes of the markup, according to their line heights.

块布局，就像div默认情况下一样，由垂直堆叠的行框组成，它们之间没有空间，也不会重叠。每个 line box 都以一个strut开始，strut是一个虚构的 inline box，其高度为为块指定的 line-height。行框然后根据它们的行高继续与标记的行内框。

The diagram below shows the layout for your first example. Note that because 1.7 times the font-height is much less than the height of the strut, the line height is determined by the height of the strut, since the line box must wholly contain its inline boxes. If you had set the line height on the spanto be greater than 200px, the line boxes would be taller, and you would see the text move further apart.

下图显示了第一个示例的布局。请注意，由于 font-height 的 1.7 倍远小于 strut 的高度，因此行高由 strut 的高度决定，因为行框必须完全包含其行内框。如果您将 上的行高设置span为大于 200 像素，则行框会更高，并且您会看到文本移得更远。

When you make the spaninline-block, the relationship between the divand the spandoesn't change, but the span gains it's own block layout structure with its own stack of line boxes. So the the text and the line breaks are laid out within this inner stack. The strut of the inner block is 1.7 times the font-height, i.e., the same as the text, and the layout now looks as below, so the text lines are positioned closer together, reflecting the line-height setting of the span.

当你制作spaninline-block 时，thediv和 the之间的关系span不会改变，但是 span 获得了它自己的块布局结构和它自己的 line box 堆栈。所以文本和换行符都放在这个内部堆栈中。内块的strut是font-height的1.7倍，即和文本一样，现在的布局如下图，所以文本行的位置靠得更近，反映了.txt的行高设置span。

(Note that the two diagrams are on different scales.)

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

回答by John H

This is by design. There are two element types within an HTML document: block and inline. Inline elements don't interrupt the flow of the document, but block elements do.

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

Block elements, as the name suggests, block out an area on the page which contains some content. Some examples of block elements are: <p>and <div>. You can apply height, line-height and other CSS properties to these elements in order to change the size of the block, and subsequently, the flow of the document.

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

Inline elements take up the minimum amount of space required to render them, which means setting widths and heights on these elements will have no effect. As you've already seen, you can tell the browser to treat an inline element as a block element to allow you to apply heights to them.

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

An example of this can be seen when using <li>elements to create menus. <li>s are block elements. If you create a list, the items will display vertically on the page, ensuring that each list item appears below the previous one. However, if you apply display: inline;to the list items, they will now appear horizontally.

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