为何height属性对inline-flex容器生效，却对普通inline元素无效？

• 对inline元素设置height属性无效。
• 对inline-flex元素设置height属性却能生效，这似乎不符合常理！
• 为何在以下示例中，对inline元素设置height属性能生效？

示例代码 #

CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    border: 1px solid red;
    padding: 10px;
    margin-top: 20px;
}
span {
    border: 1px solid black;
}

.container{
    border: 5px solid yellow;
    display: inline-flex;
    height: 60px;
}

HTML代码 #

<body>
    <div>
        <span class="container">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </span>
    </div>
</body>

问题解析 #

要搞懂这个问题，得先明确CSS元素显示模式的内外特性差异：

• 普通inline元素（比如默认状态的span）属于纯inline-level元素，这类元素的垂直尺寸完全由内容和line-height决定，设置height属性无效是CSS规范的明确规定——inline元素不支持通过height/width显式控制尺寸。
• inline-flex是一种混合显示模式：外部表现为inline（不会独占一行，可与其他inline元素并排），但内部是flex容器。flex容器本质属于块级容器范畴，块级容器天生支持height和width属性的设置，所以给inline-flex元素设置height会生效，这完全符合规范。

回到示例：.container设置的是display: inline-flex，它不是普通的inline元素，而是具备inline外部特性的flex容器，内部的flex容器特性让它可以响应height属性，所以height:60px能生效，这和普通inline元素的规则并不冲突。

内容的提问来源于stack exchange，提问作者Liam Anderson