How to add space between consecutive headings which contains consecutive paragraphs and reduce the space between heading and paragrph

Question

I have a multiple headings with consecutive paragraph tags. The space between each paragraph and a heading should be very less where as the space between headings should be very high. I do not want to use div or any class names to tags because i many many heading. below is my code can anyone helo me out.

h2 {
  margin-bottom: 100px;
}

h2,
p {
  margin: 0px;
  padding: 2;
}

<h2>heading1</h2>
<p>paragraph1</p>
<h2>heading2</h2>
<p>paragraph2</p>
<h2>heading3</h2>
<p>paragraph3</p>
<h2>heading4</h2>
<p>paragraph4</p>
<h2>heading5</h2>
<p>paragraph5</p>

expected output: enter image description here

Answer 1

Why not just set the margin between the ehader and the paragraph to 0? You can use the + selector to select the next element:

h2 {
  margin-bottom: 0;
}

h2 + p {
  margin-top: 0;
}

<h2>heading1</h2>
<div>paragraph1</p>
<h2>heading2</h2>
<p>paragraph2</p>
<h2>heading3</h2>
<p>paragraph3</p>
<h2>heading4</h2>
<p>paragraph4</p>
<h2>heading5</h2>
<p>paragraph5</p>