整个网页的行距答案

【问题标题】：line spacing on entire webpage整个网页的行距
【发布时间】：2017-01-04 09:36:40
【问题描述】：

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

https://gyazo.com/63c28f6ce59b8a5e17cf3d9835effa9e

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

我该怎么做？

【问题讨论】：

只需将行line-height 属性添加到您的body 标签？如果这不起作用，则可能您使用了覆盖它的 css 框架或第三方 css 文件。但如果没有代码，我们就无法真正帮助您。
对于此类问题，我建议在 jsfiddle.net 之类的公共服务上复制代码的问题/sn-p 并将其发布在这里，以便我们更好地了解您的尝试和如何改进/解决它。

标签： html css line space

【解决方案1】：

这正是通过 line-height CSS 属性完成的。

如果您想在整个网站上使用相同的 line-height，只需将其应用于您的 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;
}

您可以在the MDN specification page 上阅读更多关于您可以使用的值和line-height 的行为。

【讨论】：

【解决方案2】：

您可以添加以下内容以确保 line-height 全局适用于整个网站：

p {
   line-height: 24px;
}

或：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

body {
  line-height:2em;
}

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

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

【讨论】：