CSS:内联标题的行高会扰乱行间距

Question

我有一些带有内联标题跨度的段落，我正试图将其设置为网格。为了确保多行标题的间距正确，我使用了行高；但是，这会导致段落的第一行和第二行之间的空间太大。此外，多行标题似乎没有内联。 (标题的实际所需行高是 33px，但我将其设置为 44px 以突出第一段和第二段行之间的空间)。

请参阅http://jsfiddle.net/NbTvu/4/和 http://i.imgur.com/qkffaWl.png

CSS:

p {
    font-size: 14px;
    line-height: 22px;
    margin-top: 22px;
}

span.h1 {
  font-size: 24px;
  line-height: 44px;
  font-weight: 600;
  display: inline-block;
  margin-top: 22px;
}

HTML:

<p>
     <span class=h1>DISCONTINUING PPIs</span>
    — Rebound acid-hypersecretion is an important consideration following abrupt cessation of prolonged treatment with PPIs. As a result, treatment should be tapered following prolonged or higher dose treatment with a PPI.
</p>

提前致谢!

Answer 1

您的font-size 对于您想要实现的目标来说太大了。

看看这个:如果我删除字体大小和行高，它会完美地工作:

http://jsfiddle.net/NbTvu/1/

span.h1 {
  font-weight: 600;
  display: inline-block;
  margin-top: 22px;
}

尝试从这里设计风格。

并且使用 span class="h1" 非常非常糟糕。使用常规 h1 或为您的 span 提供更好的类名。