html - 为什么 display:inline 取消高度？

Question

我正在制作一个带有 id 的菜单，menu其中包含以下设置：

display: inline;
height: 200px;

一旦我删除display: inline;，高度再次起作用。

为什么？

Answer 1

display: inline;

通常用于指代文本元素；

从 w3c 页面：

[inline] 使元素生成一个或多个内联框。

因此，您必须设置的高度是line-height属性。从 w3c 页面：

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。

请注意，您只能控制内联元素的最小高度

Answer 2

因为规范是这样说的：

'height' ... 适用于：所有元素，但未替换的内联元素、表格列和列组

line-height但是，确实适用于inline元素。

Answer 3

通过使某些内容内联显示，您实际上使其与跨度相同。因此，唯一有效的高度值是 line-height，因为您正在处理内联元素。

要呈现高度值，您需要使用 div 标签或强制现有选项卡像接受高度属性的 div / 对象一样呈现。您可以通过设置 display:block 来做到这一点。

本质上，您可以通过设置 display:inline 将 div 渲染为像 span 一样工作，反之，通过 display:block 将 span 渲染为有效的 div。

Span 标签用于内联样式，例如字体大小、颜色、装饰等。