css - 无法更改标题内元素的行高

Question

我有一个包含 small 的标题 (h1)。 small 被设置为 font-size: 60%。一切看起来都很好，直到 small 太长而无法容纳在一行和换行符上。

然后发生的是 small 的 line-height way 太高了。将其更改为 1 或 < 1 没有区别。即使将其更改为精确的 px 值也无济于事。

如何正确减小 h1 small 的行高？

http://jsfiddle.net/2SDLq/

    <h1><small>Here's a long small text preceding the normal sized text in this heading</small><br>Normal Size</h1>

    h1 {
    font: bold 30px/1.2 "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 3rem;
}

h1 small {
    font-size: 60%;
    font-weight: normal;
    line-height: 10px; /* Does nothing */
}

Answer 1

您需要将 display:inline-block 添加到小。内联元素不采用行高。

更新了 jsfiddle http://jsfiddle.net/2SDLq/14/