Question

我想要一些文本单行间隔和一些文字双倍间距。

＆＃13;

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

＆＃13;

<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>

＆＃13;

问题在于，双倍行距文本在某种程度上垂直居中，在段落顶部添加了额外的空白区域，并减少了双倍空格段落后的空白量。结果是单空间和双空间段落之间的尴尬差距。理想情况下，双空格段落的文本应该在容器的顶部对齐，以便视觉效果与在单行文本之后使用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>

如何将空格文本加倍并使文本对齐保持在顶部？

1 个答案: