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太大了，无法实现。

看看这个：如果我删除了font-size和line-height，它可以完美地运行：

<强> http://jsfiddle.net/NbTvu/1/

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

尝试从这里开始设计。

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

Answer 2

或者你可以利用边缘玩一点：

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

span.h1 {
  font-size: 24px;

  font-weight: 600;
  display: inline-block;
  margin-top: 21px;
}

并删除行高... http://jsfiddle.net/NbTvu/2/

CSS：内联标题的行高会破坏行间距

CSS：

HTML：

2 个答案: