为什么跨度的行高没有用? [英] Why is the span's line-height is 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>

为什么span的line-height未使用?

line-height仍然是200px，但是当我们将span的display属性设置为inline-block时，会使用span的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 is 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上的行高设置为大于200像素，则行框会更高，并且您会看到文本移得更远.

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倍，即与文本相同，现在的布局如下图所示，因此文本行的位置靠得更近，反映了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屋！