为什么显示：内联取消高度？

Question

我正在制作一个ID为menu的菜单，其中包含以下内容：

display: inline;
height: 200px;

删除display: inline;后，身高再次发挥作用。

为什么？

Answer 1

display: inline;

通常用于引用文本元素;

从w3c页面：

  

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

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

  

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

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

Answer 2

因为the spec says so：

  

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

但是，

line-height适用于inline元素。

Answer 3

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

要渲染高度值，您需要使用div标记或强制现有标签呈现为接受高度属性的div /对象。您可以通过设置display：block。

来完成此操作

从本质上讲，你可以通过设置display：inline来渲染一个div来像span一样工作，并相反地通过display：block来渲染一个span作为div。

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