0

I have this code in my webpage 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>

and I just realized that big spaces between lines is due to my style tag, when I remove it, spaces are ok, Any idea ? I want this style for padding...

Here is screenshot:

spaces screenshot

andrew
  • 459
  • 5
  • 21

2 Answers2

1

Change all the padding to padding-left. It will still indent it from the left but will not affect up, down, right:

h1, h2, p, h4 {

  padding-left: 20px;
}
A.J. Uppal
  • 19,117
  • 6
  • 45
  • 76
1

The padding property is actually a short-hand for four other properties:

padding-right padding-left padding-top padding-bottom

Any value applied to padding will be applied to all four of these, so padding is being added all around your elements. You neeed to use padding-left only.

Full, working code snippet:

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>

An additional point: to avoid having to add padding to every element individually, you could instead add a margin-left to its container (eg. 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>
Run_Script
  • 2,487
  • 2
  • 15
  • 30