Question

我的标题（h1）包含small。 small的样式为font-size: 60%。一切看起来都很好，直到small太长而无法放在一条线和换行符上。

然后会发生small的行高 way 太高。将其更改为1或＆lt; 1没有区别。即使将其更改为精确的px值也无效。

如何正确降低h1 small的行高？

    <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/

Answer 2

自：

标题是默认的块元素
内联块值（尽管幸运地不再使用这些版本）
您将small元素放在单独的行中

您可以将display属性设置为block：

h1 small {
    display: block;
    font-size: 60%;
    font-weight: normal;
    line-height: 10px;
}

除了能够设置small的行高属性外，您还可以删除不必要的标签，并使用填充和/或边距设置标题文本和小标记之间的间隔< / p>

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

2 个答案: