更改跨度高度，文本溢出到下一行

Question

我正在制作一个受美国宪法启发的网页，但我遇到了一个奇怪的 CSS 问题。相关部分如下所示：

这是我的 HTML：

<span id="we-the-people" class="ui image">
  <img src="/images/we-the-people.png">
</span>

<span id="preamble">
  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</span>

... 和 CSS：

#we-the-people {
  margin: 2em;
}
#preamble {
  font-family: US Declaration, serif;
  line-height: 2.5em;
  position: relative;
  top: 35px; 
  font-size: 1.5em;
}

我希望溢出到第二行的文本更接近“我们人民”的形象，但我不知道该怎么做。我尝试更改 line-height 和 position 无济于事。看起来很奇怪的是，溢出的文本远低于图像的底部，正如这个检查页面的屏幕截图所示：

谁能告诉我怎么了？

Answer 1

1. 尝试从#we-the-people 样式中删除底部2em 边距，如下所示：

    margin: 2em 2em 0 2em;
   /*Assuming you need the 2em margin top, right and left*/
   

2. 删除 #preamble 样式中的 position: relative; 和 top: 35px; 条目。

3. 行高也会影响垂直间距，尤其是当您使用ems 或% 时，它们会与父字体大小层叠，并可能导致奇怪的间距。

我建议您使用带行高的乘数，如下所示：

 line-height: 1.2;

请注意，不包括单位值。 1.2 将给出行高 1.2x 字体的高度。较低的值（包括负值）可用于将每条线移近前一条（如果需要，包括重叠的线），较大的值增加前导并将线移得更远。

字体名称'US Constitution' 也应该用引号引起来，因为它包含一个空格。希望这会有所帮助。