为什么跨度的线高无用？

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的line-height未使用的？

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

见下文:

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>

Answer 1

div默认情况下,块布局由垂直堆叠的线框组成,它们之间永远不会有空格,永远不会重叠.每个线框以一个支柱开始,该支柱是一个虚构的内联框,表示为该块指定的线高的高度.然后,线框根据其线高继续标记的内联框.

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

当你的spaninline-block的,之间的关系,div以及span不会改变,但跨度它自己的线箱堆获得它自己的块布局结构.因此,文本和换行符在此内部堆栈中布局.内部块的支柱是字体高度的1.7倍,即与文本相同,现在布局如下所示,因此文本行更靠近在一起,反映了文本行的高度设置span.

(请注意,这两个图表的尺寸不同.)

Answer 2

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

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

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

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