html - 调整浏览器文本大小的 CSS 行高

Question

我不是 CSS 专家，所以请原谅这可能是一个基本问题。我有一个恼人的问题，我似乎无法解决:

这是我没有 CSS 行高的文本:

我想将文本移近标题标签，所以我这样做了:

<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>

结果

结果很完美，正是我想要的，但是......当我调整浏览器大小时，问题就来了。

调整浏览器大小问题

我的问题

为什么文本在浏览器调整大小时会压缩？我究竟做错了什么？我不应该使用 line-height 属性吗？有什么解决方法吗？

Answer 1

line-height 属性用于控制为每行分配多少垂直空间。通常，它用于调整元素内行与行之间的间距。

line-height: 1 表示行的大小足以容纳最高的字母和最低的下行字母，中间没有空格。 line-height 大于 1 意味着行之间有一些额外的空间，小于 1 将导致行重叠。

line-height: 0 表示一行文本没有分配垂直空间，因此所有行将在一行中相互重叠。这就是您在这里看到的:文本换行到第二行，第二行呈现在第一行的顶部。

您要做的是调整元素之间的间距，而不是单个元素中行之间的间距。为此，推荐的方法是调整 margin 或 padding。考虑调整元素的边距，直到获得所需的垂直节奏。

有关所有三个属性如何工作的真正详细说明，请参阅 CSS Tricks article on the box model .

例子

body { font-family: sans-serif; }

.cramped h2 {
  margin: 0.4em 0 0.2em;
}

.cramped p {
  font-style: italic;
  margin: 0;
}

<section class="cramped">
  <h2>Loren Ipsum Dol Tjovanuu</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
  <h2>Neque porro quisquam est qui dolorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>