如何将文本的空格增加一倍并使文本对齐在顶部

Question

我想要一些单间距文本和一些双间距文本。

* {
  margin: 0;
  padding: 0;
}
.single-space {
  line-height: 1;
}
.double-space {
  line-height: 2;
}

<p class="single-space">Default single-spaced line.</p>
<p class="double-space">Default paragraph of double-spaced text. With several sentences and lots of beautiful words to describe many awesome things.</p>
<p class="single-space">One more single-spaced line.</p>
<p class="double-space">Another paragraph of double-spaced text. With several sentences and lots of beautiful words to describe many awesome things</p>
<br /><p><b>Result should look like this:</b></p><br />
<p class="single-space">This is what it should look like to have a single spaced line followed by a double spaced line.<br>This is what a double spaced line<br /><br />should look like. Notice that it <br /><br />follows directly after the single<br /><br />spaced line.<br /><br />And finally a single spaced line following the last double spaced line reveals a full space between the two.</p>

问题是，双间距文本在一定程度上垂直居中，在段落顶部添加额外的空白，并减少双间距段落后的空白量。结果是单空格和双空格段落之间出现了尴尬的间隙。理想情况下，双空格段落的文本应该在容器的顶部对齐，这样视觉效果就与在每一行文本之后使用break元素时的效果相同。

Answer 1

现在应该可以使用position: relative和顶部垂直对齐top: -.5em。.5em是2em - 1em的一半，其中1em是默认字体大小。

* {
  margin: 0;
  padding: 0;
}
.single-space {
  line-height: 1;
}
.double-space {
  line-height: 2;
  position: relative; 
  top: -.5em;
}

<p class="single-space">Default single-spaced line.</p>
<p class="single-space">Default single-spaced line.</p>
<p class="double-space">Default paragraph of double-spaced text. With several sentences and lots of beautiful words to describe many awesome things.</p>
<p class="single-space">One more single-spaced line.</p>
<p class="double-space">Another paragraph of double-spaced text. With several sentences and lots of beautiful words to describe many awesome things</p>
<br /><p><b>Result should look like this:</b></p><br />
<p class="single-space">This is what it should look like to have a single spaced line followed by a double spaced line.<br>This is what a double spaced line<br /><br />should look like. Notice that it <br /><br />follows directly after the single<br /><br />spaced line.<br /><br />And finally a single spaced line following the last double spaced line reveals a full space between the two.</p>