为什么跨度的行高是无用的 [英] why the span's line-height is useless
问题描述
首先，让我们看一段代码：
First, let's see a piece of code:
http：// jsfiddle。 net / rFGkV /
为什么跨度的行高未使用？ line-height仍然是200px，但是当我们将span的显示属性设置为 inline-block 时，使用span的行高？
Why is the span's line-height unused? 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 是默认情况下由线框的垂直堆栈组成，它们之间从不具有空格，从不重叠。每个线框以一个 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 的行高设置为大于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 inline-block时， div code> span 不会改变，但是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屋！
