在较大的第一个字母后调整行高

Question

我有一个字段集的图例，我想将第一个字母设置得非常大。这具有增加图例的线高度并降低其相对于场集边界的位置的效果。我希望能够提升图例的垂直对齐方式，以便大部分文本再次与字段集边框中间对齐。

如果我将第一个字母的行高设置为零，它确实改善了这种情况;但是，剩下的文本的行高仍然大于没有大的第一个字母的行高，并且垂直对齐不是很正确。

HTML

<fieldset id="fs1">
  <legend>1. Title</legend>
  Some text inside.
</fieldset>


<fieldset id="fs2">
  <legend>1. Title</legend>
  Some text inside.
</fieldset>


<fieldset id="fs3">
  <legend>1. Title</legend>
  Some text inside.
</fieldset>

CSS

fieldset {
  margin-top: 50px;
}

legend {
  background-color: yellow;
}

#fs2 legend:first-letter {
  font-size: 5em;
}

#fs3 legend:first-letter {
  font-size: 5em;
  line-height: 0;
}

你可以看到我的意思here

Answer 1

我通过将legend的高度设置为1em并稍微调整垂直位置来实现它。

#fs3 legend {
  height: 1em;
  position: relative;
  top: -.75em;
}

Codepen fork here

Answer 2

只是为了好玩，这是另一个解决方案：

#fs3 legend {
  padding-bottom: 43px;
  line-height: 0;
  height: 0;
}