为什么跨度的行高没有用？ [英] Why is the span's line-height useless?

问题描述

首先，让我们看一段代码：

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>

为什么未使用跨度的线高？

行高仍为 200px ，但是当我们设置 span 的 display 属性设置为 inline-block ，即<$ c $是否使用了跨度中的c> line-height ？

The line-height is still 200px, but when we set span's display property to inline-block, the line-height of the span is used?

请参见以下内容：

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>

推荐答案

默认情况下，像 div 一样，块布局由垂直的行框组成。 >，它们之间永远不会有空间，也不会重叠。每个行框均以 strut 开头，该 strut 是一个假想的行内框，其高度为该块指定的行高。然后，根据其行高，行框继续标记的内联框。

Block layouts, like div elements are 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 strut which 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.

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

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 span to be greater than 200px, the line boxes would be taller, and you would see the text move further apart.

内嵌 span 时， div 和 span 不变，但是跨度通过其自己的线框堆栈获得了其自己的块布局结构。因此，文本和换行符布置在此内部堆栈中。内部块的支撑是字体高度的1.7倍，即与文本相同，现在的布局如下图所示，因此文本行靠得更近，反映了<$ c的行高设置$ c> span 。

When you make the span inline-block, the relationship between the div and the span doesn'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.

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

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

这篇关于为什么跨度的行高没有用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！