如何讓空間文字加倍並保持文字頂部的對齊？

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>

的問題是雙間隔文本變得稍微垂直居中於該段的頂部添加額外的空格和一個雙空間段之後減小的空白量。結果是單空間和雙空間段落之間的尷尬差距。理想情況下，雙空間段落的文本應該在容器的頂部對齊，以便視覺效果與在單行文本之後使用斷點元素時會發生的情況相同。

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>