Question

我希望在我的网页上的行之间留出更多空间。我尝试在CSS中应用“line-height”来尝试创建更多空间，但我意识到它不起作用：

https://gyazo.com/63c28f6ce59b8a5e17cf3d9835effa9e

在图片上，我在div，p或span中有一段文字。如果文本变得太长，它最终会变成几行。当发生这种情况时，我希望线之间有更多的空间。

我该怎么做？

Answer 1

这完全是使用line-height CSS属性完成的。

如果您想在整个网站上使用相同的body，只需将其应用于body { line-height: 1.5; // a numerical value, or line-height: 25px; // a pixel value, for example }元素即可：

// applies to all <p> elements
p {
  line-height: 1.3em;
}

// applies only to elements with the .my_paragraph class
.my_paragraph {
  line-height: 20px;
}

您还可以定位特定的标签或类：

line-height

您可以在the MDN specification page上详细了解可以使用的值以及{{1}}的行为。

Answer 2

您可以添加以下内容以确保整个网站全局适用行高：

p {
   line-height: 24px;
}

或：

body,
p {
   line-height: 24px;
}

Answer 3

来自http://www.w3schools.com/cssref/pr_dim_line-height.asp的是以下示例

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
    line-height: 70%;
}

p.big {
    line-height: 200%;
}
</style>
</head>
<body>

<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Answer 4

在body标签中使用line-height属性，就像上面的例子一样：

＆＃13;

body {
  line-height:2em;
}

＆＃13;

<body>
  <h1>This is just a title</h1>
  <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
</body>

＆＃13;

如果这不起作用，可能是因为另一个css文件（例如，如果你使用的话，来自你的css框架）会覆盖该属性。因此，请尝试将!important标记添加到您的line-height属性中。

整个网页上的行间距

4 个答案: