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 + .subtitle
针对相同的事情，但我想知道上面的第二个选项是否有任何方法让我操纵一个有两个不同行高的段落。

编辑：我正在使用最新版本的Firefox。

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

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/

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

1 个答案: