行之间的大空间，HTML [重复]答案

【问题标题】：big spaces between lines, HTML [duplicate]行之间的大空间，HTML [重复]
【发布时间】：2020-05-17 21:10:11
【问题描述】：

我的网页中有此代码webcovid19.live

<style>
h1 {

  padding: 20px;
}

h2 {

  padding: 20px;
}

p {

  padding: 20px;

}
h4 {

  padding: 20px;
}

</style>
....
<body>
<p> Data Source : Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU)</p>
<p> Powered by Google Data Studio &amp; Google BigQuery</p>

我刚刚意识到行之间的大空间是由于我的样式标签，当我删除它时，空格就可以了，知道吗？我想要这种风格的填充...

这是截图：

【问题讨论】：

您正在添加填充
好的，所以如果我想要从左边开始的文本位置，我需要不同的标签吗？

标签： html css

【解决方案1】：

将所有padding 更改为padding-left。它仍然会从左缩进，但不会影响上、下、右：

h1, h2, p, h4 {

  padding-left: 20px;
}

【讨论】：

谢谢，它现在可以工作了！

【解决方案2】：

padding 属性实际上是其他四个属性的简写：

padding-rightpadding-leftpadding-toppadding-bottom

应用于padding 的任何值都将应用于所有这四个，因此将在元素周围添加填充。您只需要使用padding-left。

完整的工作代码 sn-p：

h1, h2, p, h4 {
  padding-left: 20px;
}

<p> Data Source : Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU)</p>
<p> Powered by Google Data Studio &amp; Google BigQuery</p>

另外一点：为了避免必须为每个元素单独添加填充，您可以改为将margin-left 添加到其容器中（例如body）：

body {
  margin-left: 20px;
}

<body>
  <p> Data Source : Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU)</p>
  <p> Powered by Google Data Studio &amp; Google BigQuery</p>
</body>

【讨论】：

是的，现在我明白了
@andrew 我在答案中添加了另一点——在单个元素上使用margin-left，而不是对多个元素应用填充。也许你也想考虑一下？
谢谢提示，现在还可以:)