html - 如何在同一段落或标题中设置不同的行高？

Question

我读到过标题不应该用作 HTML5 其他标题的子文本，以便有一个漂亮的轮廓。例如:

<h1>Frustration</h1><br />
<h2>The life of developers</h2>

相反，它可以这样写:

<h1>Frustration
    <br />
    <span style="font-size: 0.67em">The life of developers</span>
</h1>

问题是我无法控制子文本的行高。它采用 H1 的行高，但总是看起来有点太远了。

我意识到可以这样做:
h1+.副标题
目标相同，但我只想知道上面的第二个选项是否有任何方法可以让我操纵具有两个不同行高的段落。

编辑:我使用的是最新版本的 Firefox。

当我继续寻找解决方案时，我开始怀疑这是不是一个愚蠢的问题，因为浏览器没有理由认为用户会想要在同一标签内使用单独的行高 - - 特别是当有替代方案时，例如使用带有负边距顶部的 block 元素。

Answer 1

你可以这样做:

<h1>
  <span class="mainText">Frustration</span> 
  <span class="subText">The life of developers</span>
</h1>


h1 .mainText {
 display: block; /* this prevent the need for the <br/> */
 /* additional style for the main header text */
}
h1 .subText {
  /* styling for the subtext */
}

你也可以这样做(我想这更容易):

<h1>text
    <div>subtext</div>
</h1>


h1 div {
  font-size: 0.67em
}

子文本的行高较低。对于后一个，请参阅此 jsfiddle:http://jsfiddle.net/wLD35/