首先，让我们看一段代码：
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-heightspan
见下文：
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元素一样，默认情况下是由垂直堆叠的线框组成的，它们之间永远不会有空间，也不会重叠。每个 line-box 都以strut开头，它是一个虚构的 inline box，其高度是为块指定的 line-height。然后，根据行高，行框继续使用标记的行内框。
下图显示了您的第一个示例的布局。请注意，因为 font-height 的 1.7 倍远小于 strut 的高度，所以 line 高度由 strut 的高度决定，因为 line box 必须完全包含它的 inline box。如果您将 上的行高设置span为大于 200 像素，则行框会更高，并且您会看到文本之间的距离更远。
当您制作inline-block 时，the和 thespan之间的关系不会改变，但是 span 获得了它自己的块布局结构和自己的 line box 堆栈。因此，文本和换行符布局在这个内部堆栈中。内部块的支柱是 font-height 的 1.7 倍，即与文本相同，现在布局如下所示，因此文本行位置更靠近，反映了.divspanspan
（请注意，这两个图表的比例不同。）
这是设计使然。HTML 文档中有两种元素类型：块和内联。内联元素不会中断文档的流动，但块元素会。
顾名思义，块元素会屏蔽页面上包含某些内容的区域。块元素的一些示例是：<p>和<div>。您可以将高度、行高和其他 CSS 属性应用于这些元素，以更改块的大小，进而更改文档的流向。
内联元素占用渲染它们所需的最小空间，这意味着在这些元素上设置宽度和高度将不起作用。正如您已经看到的，您可以告诉浏览器将内联元素视为块元素，以允许您对其应用高度。
<li>使用元素创建菜单 时可以看到一个例子。<li>s 是块元素。如果创建列表，项目将垂直显示在页面上，确保每个列表项显示在前一个列表项下方。但是，如果您应用display: inline;到列表项，它们现在将水平显示。