html - 更改文本溢出到下一行的跨度高度

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

我希望溢出到第二行的文本更接近“We the People”图像，但我不知道该怎么做。我尝试更改 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' 应该用引号引起来，因为它包含一个空格。希望这会有所帮助。