当我更改要显示的标题时，为什么<h4>高度会发生变化：内联？</h4>

Question

我有以下内容：

<h4>Hello</h4>
<h4 class="a">Hello</h4>
<h4 class="b">Hello</h4>

h4 {  
    font: normal 12px/23px Arial, sans-serif; margin: 0; padding: 0 7px;
    border: 1px solid #CCC; background-color: red;
}
h4.a { display: inline; }
h4.b { display: inline; height: 23px; }

示例：Here

我需要的是标题的高度保持不变，但宽度不是全宽。我改为内联，但我注意到现在高度发生了变化。有人可以解释我怎么能保持它的高度相同吗？

Answer 1

您完全无法将明确的height值应用于display: inline的元素。

如果你改为display: inline-block怎么办？

Answer 2

我更倾向于使用float: left